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function insertBanner() {var 
n=document.createElement("div");n.id="___docusaurus-base-url-issue-banner-container" ;n.innerHTML=’\n 
\n 


Your Docusaurus site did not load properly. 


\n 
A very common reason is a wrong site}baseUrl configuration 
\n 


Current configured baseUrl = / (default value) 
\n 
We suggest trying baseUrl = 


\n 
\n’ ,document.body.prepend(n);var 


e=document.getElementBylId("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+'"/";e.innerHTML=o } document.addEventListener("DOMContentLoaded" ,(function(){ void 
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Yew 
A framework for creating reliable and efficient web applications|Get StartedPlay ground 


Features 


Component Based 


Features a component-based framework which makes it easy to create interactive UIs. Developers who 
have experience with frameworks like React and Elm should feel quite at home when using Yew. 


HTML macro 


Features a macro for declaring interactive HTML with Rust expressions. Developers who have experience 
using JSX in React should feel quite at home when using Yew. 


Learn more 


Server Side Rendering 


Features server side rendering for all the SEO and enhancements of server-rendered app while keeping the 
feel of an SPA 


Support 


@ |Sponsor Project 


Participate 
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On this page 


Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


® |wasm—pac 


® jwasm-run 


e (still in early development) 


Next steps] 


With your development environment set up, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


® |wasm—pac 


® jwasm-run 


e (still in early development) 


Next steps] 


With your development environment set up, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our 
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Version: Next 
On this page 


Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
-—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


[xtask—wasm|(still in early development) 
Next steps] 


With your development environment setup, you can now either proceed with reading the documentation. 
If you like to learn by getting your hands dirty, we recommend you check out our tutorial. 
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Version: 0.20 
On this page 


Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.1. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging, and is used throughout the 
documentation and examples. 


Other optionsa] 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


(still in early development) 


Next steps] 


With your development environment setup, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our tutorial 
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@ Introduction 
Version: 0.19.0 
On this page 


Project Setup 
Overview4l 


Your local development environment will need a couple of tools to compile, build, package and debug 
your Yew application. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages or outright fail to compile. You can check your 
toolchain version using rustup show (under "active toolchain") or alternatively rustc --version. 
To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called "wasm32-unknown-unknown". The following command will add 
this target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunki] 


Trunk is the recommended tool for managing deployment and packaging, and will be used throughout the 
documentation and examples. See Wasm Build Tools for more information on packaging and alternatives. 


Summary] 


Now that you have all the tools needed, we can build a sample application. 
ena, 
Using trunk 


e 
o [installing Rus] 
o [insiall WebAssembly Targel 
e 
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Version: 0.18.0 
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Project Setup 
Rust] 


First, you’ll need Rust. To install Rust and the cargo build tool, follow the 


You also need to install the wasm32-unknown-unknown target to compile Rust to Wasm. If you’re 
using rustup, you just need to run rustup target add wasm32-unknown-unknown. 


important 


The minimum supported Rust version (MSRV) for Yew is 1.49.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Wasm Build Tools| 


Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally, 
depending on the tool you choose, they can help make deployment and packaging much less of a headache 
by generating all of the JavaScript code necessary to load and run your app’s . wasm binary in a browser. 


it runkp 


A tool practically made for building Yew apps. It can build any wasm—bindgen based app and its design 
is inspired by rollup.js. With Trunk you don’t need to have Node.js installed or touch any JavaScript code 
for that matter. It can bundle assets for your app and even ships with a Sass compiler. 


All of our examples are built with Trunk. 


Getting started with trunk 


A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used 
together with the[wasm—pack-plugin]for Webpack. The primary purpose of wasm—pack is building 


Wasm libraries for use in JavaScript. Because of this, it can only build libraries and doesn’t provide useful 
tools like a development server or automatic rebuilds. 
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Get started with wasm—pack 


cargo-werfi 


This was the best preferred tool to use before the creation of wasm—bindgen. 


Getting started with cargo web 


Comparison] 


trunk wasm-—pack cargo-web 
Eecieet Actively maintained eolively —— tenet Dy the[Rust ] No Github activity for over 6 months 
Status 'Wasm Working Group 
Bare-bones. You’ll need to write 
Dev Just works! Batteries included, no some scripts to streamline the Works great for code but needs separate 
Experience _—_ external dependencies needed. experience or use the webpack asset pipeline. 
plugin. 

rece Supported Only with webpack plugin Supported 
Server upp y with webpack plugi upp 
Auto 
rebuild on F F 
local Supported Only with webpack plugin Supported 
changes 
aes Supported Only with webpack plugin Static assets onl 
handling PP y Pee Se : y 
Headless 
Browser Supported Supported 
Testing 
s par @® wasm32-unknown-unknown 
tera “ ® wasm32-unknown-unknown @® wasm32-unknown-unknown @® wasm32-unknown-emscripten 

me ® asmjs-unknown-emscripten 
web-sys Compatible Compatible Incompatible 
stdweb Incompatible Compatible Compatible 
igs ame Toe for yew-stdweb examples 
Usage ple app y ples 
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Using trunk 
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Version: 0.21 
On this page 


Tutorial 


Introduction] 


In this hands-on tutorial, we will take a look at how we can use Yew to build web applications. Yew is a 


modern [Rust] framework for building front-end web apps using]WebAssembly| Yew encourages a 


reusable, maintainable, and well-structured architecture by leveraging Rust’s powerful type system. A 
large ecosystem of community-created libraries, known in Rust as[crates| provide components for 


commonly-used patterns such as state management. the package manager for Rust, allows us to 
take advantage of the numerous crates available on such as Yew. 
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What we are going to buildal 


Rustconf is an intergalactic gathering of the Rust community that happens annually. Rustconf 2020 had a 
plethora of talks that provided a good amount of information. In this hands-on tutorial, we will be building 
a web application to help fellow Rustaceans get an overview of the talks and watch them all from one 


page. 


Setting upél 
Prerequisitesa| 


This tutorial assumes you are already familiar with Rust. If you are new to Rust, the free|Rust Book]offers 
a great starting point for beginners and continues to be an excellent resource even for experienced Rust 
developers. 


Ensure the latest version of Rust is installed by running rustup update or byjinstalling rustif you 
have not already done so. 


After installing Rust, you can use Cargo to install t runk by running: 


cargo install trunk 


We will also need to add the WASM build target by running: 


rustup target add wasm32-unknown-unknown 


Setting up the project] 
First, create a new cargo project: 
cargo new yew-appcd yew-app 


To verify the Rust environment is set up properly, run the initial project using the cargo build tool. After 
the output about the build process, you should see the expected "Hello, world!" message. 


cargo run 


Our first static pagdal 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. Update the files as follows: 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] } 


info 
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You only need the feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering-related code. 


If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


src/main.rs 


use yew::prelude::*;#[function_component (App) ]fn app() -> Html { html! { <hl>{ "Hello World" }</h1> }}fn main() { yew: :Renderer: :<App>::new() .render();} 
Now, let’s create an index.html] at the root of the project. 


index.html 


<!doctype html><html lang="en"> <head></head> <body></body></htm1> 


Start the development server] 


Run the following command to build and serve the application locally. 
trunk serve --open 

info 

Remove option ’--open’ to not open your default browser trunk serve. 


Trunk will open your application in your default browser, watch the project directory and helpfully rebuild 
your application if you modify any source files. This will fail if the socket is being used by another 
application. By default server will listening at address ’127.0.0.1’ and port ’8080’ => 

To change it, create the following file and edit as needed: 


Trunk.toml 


[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


If you are curious, youcanrun trunk helpandtrunk help <subcommand> for more details on 
what is happening. 


Congratulations] 


You have now successfully set up your Yew development environment and built your first Yew web 
application. 
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Building HTMLA| 


Yew makes use of Rust’s procedural macros and provides us with a syntax similar to JSX (an extension to 
JavaScript which allows you to write HTML-like code inside JavaScript) to create the markup. 


Converting classic HTM14] 


Since we already have a pretty good idea of what our website will look like, we can simply translate our 
mental draft into a representation compatible with htm1!. If you are comfortable writing simple HTML, 
you should have no problem writing marking inside ht m1 !. It is important to note that the macro does 
differ from HTML in a few ways: 


1. Expressions must be wrapped in curly braces ({  }) 

2. There must only be one root node. If you want to have multiple elements without wrapping them in a 
container, an empty tag/fragment (<> ... </>) is used 

3. Elements must be closed properly. 


We want to build a layout that looks something like this in raw HTML: 


Now, let’s convert this HTML into htm1!. Type (or copy/paste) the following snippet into the body of 
app function such that the value of htm1! is returned by the function 


Refresh the browser page, and you should see the following output displayed: 
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C QQ © 127.0.0.1:8080 


RustConf Explorer 


Videos to watch 


John Doe: Building and breaking things 
Jane Smith: The development process 
Matt Miller: The Web 7.0 


Tom Jerry: Mouseless development 


John Doe: Building and breaking things 


Video Player Placeholder 


Using Rust language constructs in the markupia| 


A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup. Now, 
instead of hardcoding the list of videos in the HTML, let’s define them as a Vec of Video structs. We 
create a simple st ruct (in main. rs or any file of our choice) that will hold our data. 


struct Video { id: usize, title: String, speaker: String, url: String, } 
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Next, we will create instances of this struct in our app function and use those instead of hardcoding the 
data: 


To display them, we need to convert the Vec into Html. We can do that by creating an iterator, mapping 
it to html! and collecting it as Html: 


let videos = videos.iter().map(|video| html! { <p key=(video.id}>{format!("{}: {}", video.speaker, video.title) }</p>}) «collect: :<Htm1>(); 
tip 


Keys on list items help Yew keep track of which items have changed in the list, resulting in faster 
re-renders. It is always recommended to use keys in lists. 


And finally, we need to replace the hardcoded list of videos with the Htm1 we created from the data: 


Componentsal 


Components are the building blocks of Yew applications. By combining components, which can be made 
of other components, we build our application. By structuring our components for re-usability and keeping 
them generic, we will be able to use them in multiple parts of our application without having to duplicate 
code or logic. 


The app function we have been using so far is a component, called App. It is a "function component". 
There are two different types of components in Yew. 


1. Struct Components 
2. Function Components 


In this tutorial, we will be using function components. 


Now, let’s split up our App component into smaller components. We begin by extracting the videos list 
into its own component. 


Notice the parameters of our VideosList function component. A function component takes only one 
argument which defines its "props" (short for "properties"). Props are used to pass data down from a 
parent component to a child component. In this case, VideosListProps is a struct that defines the 


props. 
important 
The struct used for props must implement Properties by deriving it. 


For the above code to compile, we need to modify the Video struct like this: 
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#[derive (Clone, PartialEq)]struct Video { id: usize, title: String, speaker: String, url: String, } 


Now, we can update our App component to make use of VideosList component. 


By looking at the browser window, we can verify that the lists are rendered as they should be. We have 
moved the rendering logic of lists to its component. This shortens the App componentas source code, 
making it easier for us to read and understand. 


Making it interactivda] 


The final goal here is to display the selected video. To do that, VideosList component needs to 
"notify" its parent when a video is selected, which is done via a Callback. This concept is called 
"passing handlers". We modify its props to take an on_click callback: 


#[derive (Properties, PartialEq)]struct VideosListProps { videos: Vec<Video>,+ on_click: Callback<Video>} 
Then we modify the VideosList component to "emit" the selected video to the callback. 


Next, we need to modify the usage of VideosList to pass that callback. But before doing that, we 
should create a new component, VideoDet ails, that is displayed when a video is clicked. 


Now, modify the App component to display VideoDet ails component whenever a video is selected. 


Do not worry about the use_st ate right now, we will come back to that later. Note the trick we pulled 
with { for details }.Option<_> implements Iterator so we can use it to display the only 
element returned by the Iterator witha special { for ... } syntax supported by the htm1! 
macro. 


Handling statdal 


Remember the use_state used earlier? That is a special function, called a "hook". Hooks are used to 
"hook" into the lifecycle of a function component and perform actions. You can learn more about this 
hook, and others here. 


note 


Struct components act differently. See the documentation to learn about those. 


Fetching data (using external REST APT) 


In a real-world application, data will usually come from an API instead of being hardcoded. Let’s fetch 
our videos list from an external source. For this we will need to add the following crates: 
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e [gloo-net}For making the fetch call. 
e [serde]with derive features For de-serializing the JSON response 


® jwasm-bindgen-futures|For executing Rust Future as a Promise 


Let’s update the dependencies in Cargo.toml file: 
Cargo.toml 
[dependencies]gloo-net = "0.2"serde = { version = "1.0", features = ["derive"] }wasm-bindgen-futures = "0.4" 


note 


When choosing dependencies make sure they are wasm32 compatible! Otherwise you won’t be able to 
run your application. 


Update the Video struct to derive the Deserialize trait: 


+ use serde::Deserialize;- #[derive(Clone, PartialEq)]+ #[derive(Clone, PartialEq, Deserialize)]struct Video { id: usize, title: String, speaker: String, url: String,} 


Now as the last step, we need to update our App component to make the fetch request instead of using 
hardcoded data 


note 


We are using unwraps here because this is a demo application. In a real-world app, you would likely 


want to have|proper error handling 


Now, look at the browser to see everything working as expected... which would have been the case if it 
were not for CORS. To fix that, we need a proxy server. Luckily trunk provides that. 


Update the following line: 


Wl oveem let fetched_videos: Vec<Video> = Request: :get ("https://yew.rs/tutorial/data. json") + let fetched_videos: Vec<Video> = Request: :get ("/tutorial/data.json")// ... 


Now, rerun the server with the following command: 


trunk serv proxy-backend=https://yew.rs/tutorial 


Refresh the tab and everything should work as expected. 


Wrapping upll 


Congratulations! Youdave created a web application that fetches data from an external API and displays a 
list of videos. 
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What’s next] 


This application is very far from perfect or useful. After going through this tutorial, you can use it as a 
jumping-off point to explore more advanced topics. 


Stylesal 


Our apps look very ugly. There is no CSS or any kind of style. Unfortunately, Yew does not offer a 
built-in way to style components. See[Trunk’s assets]to learn how to add style sheets. 


More librariega| 


Our app made use of only a few external dependencies. There are lots of crates out there that can be used. 
See external libraries for more details. 


Learning more about Yew4l 


Read our|official documentation] It explains a lot of concepts in much more detail. To learn more about 
the Yew API, see our|API docs 
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On this page 
Awesome Yew 


Projectsa| 
@ {Realworld example}- Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes 


Yew’s latest function components and hooks. It also supports desktop application powered 
by [Tauri] 

[webapp.rs]- A web application completely written in Rust, frontend is built with Yew. 
[Rust-Full-Stack]- Easily testable and working Rust codes with blog posts to explain them. 

[Bucket Questions]- A webapp written entirely in Rust for a dumb party game. 


web-view todomvc desktop app|- Demo how to use yew for a todomve that compiles to 
WebAssembly and is bundled as a lightweight(~2mb) desktop app by[web-view] as an alternative to 


Electron, [web-view]also has a{demo| 
e [yew-react-example]- This project shows how to create a web app using a React component inside a 


Yew component. 
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Kirk|- Just A Rust WebAssembly Blog. 


[rust-async-wasm-demo]- Toy project to learn Rust and async that can be deployed to the web. 


[karaoke-rs]- A simple, network enabled karaoke player in Rust. 
Love Hue! (rs)}- A clone of the mobile game I Love Hue in Yew (Rust). 


[yew-styles-page]- This is an initial project of a framework style for yew. 


[caniuse.rs]- Rust feature search. 
- An example of building a Rust based web app (Yew) into a native app 


using electron. 

[covplot]- Live graphs of worldwide CoVID-19 data. 

‘Tanoshi|- Tachiyomi-like web manga reader. Front-end for tanoshi. 
Minesweeper|- Minesweeper built with Rust, Yew and WebAssembly. 
Freecellj- A patience game written in Rust and Yew. 


[Daydream]- A small Matrix web client written in Rust. 
Yew-WebRTC-Chat|- A simple WebRTC chat made with Yew. 
Yew Fullstack Boilerplate|- Highly opinionated boilerplate for creating full stack applications with 


Rust. 
Chord Quiz]- Practice recognizing chords in this Rust/Yew/WebAssembly app. 


[DevAndDev]- A website where developers can find pair-programming partners. Written in Rust, Yew 
frontend. 

[yew-octicons]- An easy interface for using Octicons in Yew projects. 

[Pipe]- This is a Rust / Wasm client web app which is a task control center. 

[note-to-yew]- Convert your markups into Yew macro online, which is also made by Yew. 
[ASCII-Hangman]- Configurable Hangman game for children with ASCII-art rewarding. 

[dotdotyew] -[Dot-voting]using Yew, with Rust powering the backend API. 


wasm-2048]- 2048 game implemented with Rust and Yew and compiled to Wasm. 


[website-wasm]- My personal website written in Rust via Yew/Wasm. 
[KeyPress]- A Rust WebAssembly Website example for practising english for chinese. 


[yew-train-ticket]- A Rust WebAssembly Webapp example basing Yew newest hooks and functional 
API, the code style is extremely like React Function Component. 


- Showing a d3 chart with Yew. 
- A feed reader written in Rust with a Yew frontend. 


[Flow.er]- A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, 
Yew and Trunk. 

Fullstack-Rust|- A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS 
and Diesel. 


- A simple example of a sea battle game. Rust + Yew. 
tide-async-graphql-mongodb]- Clean boilerplate for graphql services, with wasm/yew frontend. 


[surfer]- A blog built on yew + graphal, with|live demo site Backend for graphql services, and 


frontend for web application. 


[qubit] - A handy calculator, based on Rust and WebAssembly, [Live Demo} 


- A reimplementation of the excellent word game Wordle by Josh Wardle. 


Rust algorithms|- A website with interactive implementations of various algorithms (only sorting 
algorithms for now). 


34 


- A software developer portfolio, [Live Demo] 
[zzhack]- A personal blog, based on Rust & Yew, 
[viz.rs|- A website for viz web framework, 
urlurl]- A randomizing link shortener, [Live Demo] 
[Macige]- CI workflow generator for mobile app development, 
[Spaceman]- A cross-platform and graphical client for the gRPC communication protocol. 


E 


Templatesal 
e - Set up a modern Yew web app by running one command, npx 


create-yew-app my-app. 
@ |yew-wasm-pack-template|- A template for starting a Yew project to be used with wasm-pack. 
e [yew-wasm-pack-minimal]- A minimal template for starting a Yew project using wasm-bindgen and 


wasm-pack. 


® |yew-parcel-template]- Awesome Yew with Yew-Router and Parcel application. 


Crategal 
Component Libraries] 


e [yew-mdc]- Material Design Components for the Yew framework. 
e [muicss-yew]- MUI-CSS Components for Yew framework. 
® 


[yew-bulmal]- A Rust library providing components based on the bulma css library for projects using 
Yew. 


e [material-yew]- Yew wrapper for Material Web Components. 

e [Yewprint]- Port of blueprintjs.com to Yew. 

e [ybc]- A Yew component library based on the Bulma CSS framework. 
e [patternfly-yew]- Patternfly components for Yew. 

e [yew-feather]- Feather Icons components for Yew. 

e 
e 
e 


tailwind-yew-builder|- Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk. 


[yew-components]- Material Design Components for the Yew framework. 
[yew-chart]- A Yew-based charting library that provides SVG based components for rendering charts. 


Componentga] 


e [Yew Form]- Components to simplify handling forms with Yew. 


e [yew-component-size]- A Yew component that emits events when the parent component changes 
width/height. 


® |yew-virtual-scroller|- A Yew component for virtual scrolling / scroll windowing. 


e [yew-autoprops|- proc-macro to automatically derive Properties structs from args for Yew 
components. 
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Hook] 


e [yew-hooks]- Custom Hooks library for Yew, inspired by|streamich/react-use]and alibaba/hooks 
e - Reconcile Side Effects in Yew Applications, inspired by and 
react-helmet| 


react-helmet 
e - The uncomplicated state management library for Yew, inspired by[Redux]and [Recoil] 


Utils] 


e [Yewdux]- Redux-like state containers for Yew apps. 

e [reacty_yew]- Generate Yew components from React components via Typescript type definitions. 
e [styled-yew]- CSS in Rust, similar to styled-components, but for Yew. 

e [stylist-rs]- A CSS-in-Rust styling solution for WebAssembly Applications. 

e 
e 


[Yew Interop]- Load JavaScript and CSS asynchronously in Yew. 
Tailwind RS| 


Tailwind RS|- Tailwind style tracer in rust, JIT + AOT interpreter. 


Wasni| 


e [wasm-bindgen]- Facilitating high-level interactions between WebAssembly modules and JavaScript. 
e - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability 
between Rust and JavaScript. 


Tooling§l 


e [wasm-pack]- Your favorite Rust -> WebAssembly workflow tool. 
e [wasm-pack-action]- Github action to install wasm—pack by downloading the executable to speed up 
CI/CD. 


e [wasm-bindgen-action]- Github action to install wasm—bindgen by downloading the executable to 
speed up CI/CD. 


[cargo-web]- A Cargo subcommand for the client-side Web. 
Trunk|- Build, bundle & ship your Rust Wasm application to the web. 
{trunk-action]- Github action to install Trunk by downloading the executable to speed up CI/CD. 


[wabt]- The WebAssembly Binary Toolkit, for the wasm—st rip and wasm—objdump tools to 
reduce .wasm file size. 


e [binaryen]- Compiler infrastructure and toolchain library for WebAssembly, for the wasm-—opt tool 
to reduce .wasm file size. 


Articlega] 


i 


et’s Build a Rust Frontend with Yew 


e 
e Web Application completely in Rust 
e 
e 


> 


Yew - Rust & WebAsse-frontend framework 


Create a desktop app in Rust using Tauri and Yew 


@ {A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter 
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Booksal 


The WebAssembly Book]- Working with the web and producing .wasm files. 


The wasm-bindgen Guide]- How to bind Rust and JavaScript APIs. 
he wasm-pack Guide|- How to build and work with rust-generated WebAssembly. 


Programming WebAssembly with Rust|- Includes a chapter Advanced JavaScript 


Integration with Yew on creating an app with Yew. 


@ |Creative Projects for Rust Programmers|- Chapter 5, Creating a Client-Side 


WebAssembly App Using Yew. 


) 


Alternativega] 


Yew team love to share ideas with other projects and believe we can all help each other reach the full 
potential of this exciting new technology. 


e [Draco]- A Rust library for building client side web applications with WebAssembly. 

e [Percy]- A modular toolkit for building isomorphic web apps with Rust + WebAssembly. 
@ |Sauron|- Sauron is an HTML web framework for building web-apps. 

@ |Seed]- A Rust framework for creating web apps. 

e 

® 


liveview, and more. 
e [Sycamore]- A reactive library for creating web apps in Rust and WebAssembly. 


Related lists] 
@ {Awesome Rust and WebAssembly]- A list of awesome Rust and WebAssembly projects, libraries, 


tools, and resources. 


@ |Awesome WebAssembly|- Collection of awesome things regarding WebAssembly ecosystem. 
e [Awesome Rust|- A curated list of Rust code and resources. 


aa®aala.ac-é 
ea, 
Libraries 


Component Libraries 
Components 
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Muhammad Hamza 


Maintainer of Yew 


The Yew development team is thrilled to unveil Yew 0.21.0, a significant milestone in the journey of 
empowering developers to create dependable and high-performance web applications with Rust. Let’s dive 
into the major highlights of this release. 


What’s newél 
1. Changing Signatures: A Shift in Hook Dependenciesal 


One of the significant changes in Yew 0.21 is the adjustment to the signature of hooks that accept 
dependencies. Dependencies used to be passed as the second argument after the closure. However, now 
they’ re passed as the first argument before the closure. 


use_effect_with_deps(deps, move |deps: Vec<i32>| { // Do something with dependencies}) ; 


The reason behind swapping the order of dependencies in the code snippet is to address a specific use 
case. In situations where the same value is needed both to compute a dependency and to be moved by 
value into the closure, the new order simplifies the code and improves readability and ergonomics. 


40 


This is a big breaking change so we’ ve provided|a way to automate the refactor] 
2. Versatile Child Types] 


Yew now allows you to use any type as children within your components. This means you’ re no longer 
limited to just the Children type. Instead, you can use any type, even Htm1 or closures, unlocking 
patterns such as: 


html! { <Comp> { |p: RenderProps | html! {<>{"Hello, "}{p.name}</>}} </Comp> } 


3. Agents: A Complete Rewritda] 


Yew 0.21 brings a complete rewrite of yew-agent. This streamlines and simplifies the way workers 
operate. Here’s what you need to know: 


e@ Introducing Providers: Say goodbye to the old Worker: : bridge () method. Now, you can use 
the use WorkerProvider/ ReactorProvider /OneshotProvider as per your need, by 
creating them using the hooks. 


@ WorkerLink to WorkerScope: We’ve removed WorkerLink in favor of WorkerScope. This change 
simplifies the worker architecture, making it more straightforward to manage and maintain. 


There are now 3 types of agents to be used, depending upon the situation: 
@ Worker Agent: The original agent that uses an actor model, designed to handle complex states. 


@ Oneshot Agent: Designed for scenarios where you expect a single input and a single output for each 
agent. 


@ Reactor Agent: Ideal for situations where multiple inputs and multiple outputs are needed for each 
agent. 


Learn more in|documentation of yew-agent 


4. Performance Improvements: A Faster and Smoother ExperiencdAl 


Yew 0.21 brings substantial performance improvements. Your web applications will run faster and more 
efficiently, thanks to optimizations that reduce memory usage and enhance rendering. 


Call for Contributors] 


The Yew project thrives on community involvement, and we welcome contributors with open arms. 
Whether you’ re an experienced Rust developer or just starting your journey, there are plenty of ways to 
get involved and make a meaningful impact on Yew’s growth. 


i 


Here are some areas where you can contribute: 


© Code Contributions: If you’re passionate about web development with Rust, consider contributing 
code to Yew. Whether it’s fixing bugs, adding new features, or improving documentation, your code 
can help make Yew even better. 


@ Documentation: Clear and comprehensive documentation is vital for any project’s success. You can 
contribute by improving documentation, writing tutorials, or creating examples that help others 
understand and use Yew effectively. 


e Testing and Bug Reporting: Testing Yew and reporting bugs you encounter is a valuable 
contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for 
everyone. 


@ Community Support: Join discussions, chat rooms (we have our own Discord and Matrix!), or 
social media to assist other developers using Yew. Sharing your knowledge and helping others solve 
problems is a fantastic way to contribute. 


Contributing to open-source projects like Yew is not only a way to give back to the community but also an 
excellent opportunity to learn, collaborate, and enhance your skills. 


To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions 
are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting 
journey! 


Thanks] 


Many people came together to create Yew 0.21. We couldn’t have done it without all of you. Thanks! 


See|the full changelog| 
Releasing Yew 0.20 


20224!’ 11ae24e¥ A- ¢’24 
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Muhammad Hamza 


Maintainer of Yew 


The Yew team is happy to announce a new, long overdue, version of Yew: v0.20. Yew is a framework for 
creating reliable and efficient web applications. 


aga’: 

@ release 
aaa ea 
Hello Yew 


2022411 ae20e¥ A- ¢’14 
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Muhammad Hamza 


Maintainer of Yew 


This is the first Yew blog post. 


@ (Sponsor Project 
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Build a sample app 


a aaa«aRust 4®@e°e|a©anda@a*aal 2434444 (Ee: 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"authors = ["Yew App Developer <[email protected]>"]edition = "2018"[lib]crate-type = ["cdylib", "rlib"] [dependencies]yew = "0.17"wasm-bindgen = "0.2" 
d»>¥4 Aa@aaraanal4aa src/lib.rsdajana«a«a3aalsaaiaa aa: 

src/lib.rs 

Aa@Aaaraarnasad A«al4aa«Component Aa»aaagaddaMode la alsaaaa aaa Adaee “ead A2ad2aa54aa 


main () 4®4,-4«4@aApp: :<Model>: :new() .mount_to_body () aa¢aa°aa'a;a44aaa|4a'44 Aa®<body>aya°aaajaraaaaa a«cla«e> ead} 


ear4«dd¢aea@ad,-A®@staticé diaad@si©Oa«dd«index.htm144jana«sei 2a aaldd 444 
mkdir static 


index.html 


~ ~wa~lowrwqdaA 
a¢aa aaaaia 
[wasm—packha2; 4a@aag¢aa*aaaaa Oa «ee a¥ dae ee3a§aa 


a344 wasm—packaanasa aalsa«adlaa*aa “Adcargo install 
wasm—packa§ana7a aaa «aaléc apa saa saadaala a94aaa: 


wasm-pack build target web out-name wasm out-dir ./static 


wasm—packa a3434a04«aaa WebAssembly 4° JavaScript 


a©Aaaalsdarsd AdAAABA . /staticdalara Aa a«dlraa a¢aa°a® WebAssembly a4aaa°ae*-4, e734 4aa§ aaaayaaa 


cargo +nightly install miniserveminiserve ./static --index index.html 
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Examples 


wa~w~ ~rard-3/ kh ~~~ ~~r~r ~~~ 


Yew 4@a*aa ,aa°a [a34haaaaaaaraa (4) aaa asa! cee3a we $a)a 
e§aaadalaa 2 alAd A@xe ©l2aA@aly, de Ac¥AA@a«F Add @Asad «adc uAa@aasaarsaa 44«H°A 4444 Issue 


A aASA«A«d AGHA 


a«alaza a7a7aalsaara 


Apanaaawaaaar 


® 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 


51 


VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isJavaliable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust": "html", } 


Neovinia] 
Lazyvimia] 


Below configuration works with[Lazy Vim]configuration and lazy.vim plugin, create a file in 
lua/plugins/nvim—lspconfig.1ua (or update your 1spconfig) with: 


return { { "neovim/nvim-lspconfig", init_options = { userLanguages = { eelixir = "html-eex", eruby = "erb", rust = "html", Fe }, 


e@ |Add a template for creating components 


JetBrains IDEs 


@ |Support for the html! Macro 
JetBrains IDEs 


Support 
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Version: 0.21 


Yew concepts 


Learn about the important Yew concepts! 


01, Using Basic Web Technologies In Yew 


5 items 


01, Components 
9 items 

o1, HTML 

8 items 

01, Agents 


Yew’s Actor System 


01, Contexts 


Using contexts to pass deeply nested data 


01, Router 


Yew’s official router 


01, Suspense 
Suspense for data fetching 


aa 

ena, 

Using Basic Web Technologies In Yew 
Support 
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Advanced topics 


Learn about the advanced topics and inner workings of Yew! 


01, How it works 


Low level details about the framework 


01, Struct Components 


6 items 


01, Children 


Inspecting and manipulating Children can often result in surprising and hard-to-explain behaviours in your 
application. 


01, Optimizations 


Make your app faster 


01, Portals 


Rendering into out-of-tree DOM nodes 


01, Server-side Rendering 


Render Yew on the server-side. 


01, Immutable Types 
Immutable data structures for Yew 


aa, 
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Miscellaneous 


01, Debugging 


01, Deployment 
Deploying Yew applications 
di, CSS 

&lt; TODO &gt; 


01, Testing apps 


Testing your app 


01, Roadmap 

The planned feature roadmap for the Yew framework 
aa, 

Immutable Types 

e7ja, 

Debugging 

Support 
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Version: 0.21 
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From 0.20.0 to 0.21.0 


Dependencies as first hook argument and use_effect_withl 


@® Replace use_effect_with_deps with new use_effect_with 
® use_effect_with, use_callback, use_memo now take dependencies as their first argument 


Automated refactor] 
With the help of|ht erep.github.io|Here are commands that can do the refactoring for you. 
Reasoning] 
This will enable more ergonomic use of hooks, consider: 
® Before 
e@ After 


impl SomeLargeStruct { fn id(&self) -> u32; // Only need to use the id as cache key}let some_dep: SomeLargeStruct = todo! ();use_effect_with(some_dep.id(), move |_| { todo!(); drop(some_dep); }); 


aa@aalaa ac-€ 
aa, 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 
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Installing Rust] 
To install Rust, follow the 
important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


® |wasm—pac 


® jwasm-run 


e (still in early development) 


Next steps] 


With your development environment set up, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our 


74 4 *¢@ac App 


Installing Rust 


e 
@ |Install WebAssembly target 
e 


Install Trunk 


O |Other options 


66 


: 
oO 
Pal 
o 


e steps 
Support 
@ (Sponsor Project 


Participate 


67 


Skip to main content 


lo) 
~< 
oO 
<= 
tC 
Q 
lo) 


BAG 
OVO Wo 
AHE 
= 
ie) 


e 
SY SIZ 
ITS Ke 
=) | | ae 


e@@e @ 
OVO 
i, 
Sd | Boe 
fo} | f=) 


© 
gm: 
NS 
go: 
8 


es 
5 
= 
N 
= 


ie 
3 | 
z| 
4 


@alra., -ze 


re 
clé«a,-2 


utorial 
(Community logPlay ground PiGitHub| 


ec¢ 


e 

O gra, 4,*¢@ag App 
O 6@;a%4a-a-\a! 
© Editor Setup 

& ,a,ayayy 

E«e°SA,»é¢ 

ee “ant 

Migration guides 


This is unreleased documentation for Yew Next version. 


For up-to-date documentation, see the (0.21). 


e 
@ A>élalras 


Version: Next 
On this page 


68 


Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 
important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
-—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


[xtask—wasm|(still in early development) 
Next steps] 


With your development environment setup, you can now either proceed with reading the documentation. 
If you like to learn by getting your hands dirty, we recommend you check out our tutorial. 
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Migration guides 


This is documentation for Yew 0.20, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.1. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging, and is used throughout the 
documentation and examples. 


Other optionsa] 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


(still in early development) 


Next steps] 


With your development environment setup, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our tutorial 
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Migration guides 


This is documentation for Yew 0.19.0, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 
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@ Introduction 
Version: 0.19.0 
On this page 


Project Setup 
Overview4l 


Your local development environment will need a couple of tools to compile, build, package and debug 
your Yew application. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages or outright fail to compile. You can check your 
toolchain version using rustup show (under "active toolchain") or alternatively rustc --version. 
To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called "wasm32-unknown-unknown". The following command will add 
this target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunki] 


Trunk is the recommended tool for managing deployment and packaging, and will be used throughout the 
documentation and examples. See Wasm Build Tools for more information on packaging and alternatives. 


Summary] 


Now that you have all the tools needed, we can build a sample application. 


Next 
Using trunk 
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@ Introduction 


Version: 0.18.0 
On this page 


Project Setup 
Rust] 


First, you’ll need Rust. To install Rust and the cargo build tool, follow the 


You also need to install the wasm32-unknown-unknown target to compile Rust to Wasm. If you’re 
using rustup, you just need to run rustup target add wasm32-unknown-unknown. 


important 


The minimum supported Rust version (MSRV) for Yew is 1.49.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Wasm Build Tools| 


Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally, 
depending on the tool you choose, they can help make deployment and packaging much less of a headache 
by generating all of the JavaScript code necessary to load and run your app’s . wasm binary in a browser. 


it runkp 


A tool practically made for building Yew apps. It can build any wasm—bindgen based app and its design 
is inspired by rollup.js. With Trunk you don’t need to have Node.js installed or touch any JavaScript code 
for that matter. It can bundle assets for your app and even ships with a Sass compiler. 


All of our examples are built with Trunk. 


Getting started with trunk 


A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used 
together with the[wasm—pack-plugin]for Webpack. The primary purpose of wasm—pack is building 


Wasm libraries for use in JavaScript. Because of this, it can only build libraries and doesn’t provide useful 
tools like a development server or automatic rebuilds. 
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Get started with wasm—pack 


cargo-werfi 


This was the best preferred tool to use before the creation of wasm—bindgen. 


Getting started with cargo web 


Comparison] 


trunk wasm-—pack cargo-web 
Eecieet Actively maintained eolively —— temee Ryne No Github activity for over 6 months 
Status 'Wasm Working Group 
Bare-bones. You’ll need to write 
Dev Just works! Batteries included, no some scripts to streamline the Works great for code but needs separate 
Experience _—_ external dependencies needed. experience or use the webpack asset pipeline. 
plugin. 

rece Supported Only with webpack plugin Supported 
Server upp y with webpack plugi upp 
Auto 
rebuild on F F 
local Supported Only with webpack plugin Supported 
changes 
aes Supported Only with webpack plugin Static assets onl 
handling PP y Pee Se : y 
Headless 
Browser Supported Supported 
Testing 
s par @® wasm32-unknown-unknown 
tera “ ® wasm32-unknown-unknown @® wasm32-unknown-unknown @® wasm32-unknown-emscripten 

me ® asmjs-unknown-emscripten 
web-sys Compatible Compatible Incompatible 
stdweb Incompatible Compatible Compatible 
Eevee sepia for yew-stdweb examples 
Usage ple app y ples 


a¥2.¢ trunk 
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Version: 0.21 
On this page 


Tutorial 


Introduction] 


In this hands-on tutorial, we will take a look at how we can use Yew to build web applications. Yew is a 


modern [Rust] framework for building front-end web apps using]WebAssembly| Yew encourages a 


reusable, maintainable, and well-structured architecture by leveraging Rust’s powerful type system. A 
large ecosystem of community-created libraries, known in Rust as[crates| provide components for 


commonly-used patterns such as state management. the package manager for Rust, allows us to 
take advantage of the numerous crates available on such as Yew. 
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What we are going to buildal 


Rustconf is an intergalactic gathering of the Rust community that happens annually. Rustconf 2020 had a 
plethora of talks that provided a good amount of information. In this hands-on tutorial, we will be building 
a web application to help fellow Rustaceans get an overview of the talks and watch them all from one 


page. 


Setting upél 
Prerequisitesa| 


This tutorial assumes you are already familiar with Rust. If you are new to Rust, the free|Rust Book]offers 
a great starting point for beginners and continues to be an excellent resource even for experienced Rust 
developers. 


Ensure the latest version of Rust is installed by running rustup update or byjinstalling rustif you 
have not already done so. 


After installing Rust, you can use Cargo to install t runk by running: 


cargo install trunk 


We will also need to add the WASM build target by running: 


rustup target add wasm32-unknown-unknown 


Setting up the project] 
First, create a new cargo project: 
cargo new yew-appcd yew-app 


To verify the Rust environment is set up properly, run the initial project using the cargo build tool. After 
the output about the build process, you should see the expected "Hello, world!" message. 


cargo run 


Our first static pagdal 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. Update the files as follows: 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] } 


ay je 
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You only need the feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering-related code. 


If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


src/main.rs 


use yew::prelude::*;#[function_component (App) ]fn app() -> Html { html! { <hl>{ "Hello World" }</h1> }}fn main() { yew: :Renderer: :<App>::new() .render();} 
Now, let’s create an index.html] at the root of the project. 


index.html 


<!doctype html><html lang="en"> <head></head> <body></body></htm1> 


Start the development server] 


Run the following command to build and serve the application locally. 
trunk serve --open 

Ajj 

Remove option ’--open’ to not open your default browser trunk serve. 


Trunk will open your application in your default browser, watch the project directory and helpfully rebuild 
your application if you modify any source files. This will fail if the socket is being used by another 
application. By default server will listening at address ’127.0.0.1’ and port ’8080’ => 

To change it, create the following file and edit as needed: 


Trunk.toml 


[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


If you are curious, youcanrun trunk helpandtrunk help <subcommand> for more details on 
what is happening. 


Congratulations] 


You have now successfully set up your Yew development environment and built your first Yew web 
application. 
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Building HTMLA| 


Yew makes use of Rust’s procedural macros and provides us with a syntax similar to JSX (an extension to 
JavaScript which allows you to write HTML-like code inside JavaScript) to create the markup. 


Converting classic HTM14] 


Since we already have a pretty good idea of what our website will look like, we can simply translate our 
mental draft into a representation compatible with htm1!. If you are comfortable writing simple HTML, 
you should have no problem writing marking inside ht m1 !. It is important to note that the macro does 
differ from HTML in a few ways: 


1. Expressions must be wrapped in curly braces ({  }) 

2. There must only be one root node. If you want to have multiple elements without wrapping them in a 
container, an empty tag/fragment (<> ... </>) is used 

3. Elements must be closed properly. 


We want to build a layout that looks something like this in raw HTML: 


Now, let’s convert this HTML into htm1!. Type (or copy/paste) the following snippet into the body of 
app function such that the value of htm1! is returned by the function 


Refresh the browser page, and you should see the following output displayed: 
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C QQ © 127.0.0.1:8080 


RustConf Explorer 


Videos to watch 


John Doe: Building and breaking things 
Jane Smith: The development process 
Matt Miller: The Web 7.0 


Tom Jerry: Mouseless development 


John Doe: Building and breaking things 


Video Player Placeholder 


Using Rust language constructs in the markupia| 


A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup. Now, 
instead of hardcoding the list of videos in the HTML, let’s define them as a Vec of Video structs. We 
create a simple st ruct (in main. rs or any file of our choice) that will hold our data. 


struct Video { id: usize, title: String, speaker: String, url: String, } 
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Next, we will create instances of this struct in our app function and use those instead of hardcoding the 
data: 


To display them, we need to convert the Vec into Html. We can do that by creating an iterator, mapping 
it to html! and collecting it as Html: 


let videos = videos.iter().map(|video| html! { <p key=(video.id}>{format!("{}: {}", video.speaker, video.title) }</p>}) «collect: :<Htm1>(); 


age 


Keys on list items help Yew keep track of which items have changed in the list, resulting in faster 
re-renders. It is always recommended to use keys in lists. 


And finally, we need to replace the hardcoded list of videos with the Htm1 we created from the data: 


Componentsal 


Components are the building blocks of Yew applications. By combining components, which can be made 
of other components, we build our application. By structuring our components for re-usability and keeping 
them generic, we will be able to use them in multiple parts of our application without having to duplicate 
code or logic. 


The app function we have been using so far is a component, called App. It is a "function component". 
There are two different types of components in Yew. 


1. Struct Components 
2. Function Components 


In this tutorial, we will be using function components. 


Now, let’s split up our App component into smaller components. We begin by extracting the videos list 
into its own component. 


Notice the parameters of our VideosList function component. A function component takes only one 
argument which defines its "props" (short for "properties"). Props are used to pass data down from a 
parent component to a child component. In this case, VideosListProps is a struct that defines the 


props. 
important 
The struct used for props must implement Properties by deriving it. 


For the above code to compile, we need to modify the Video struct like this: 
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#[derive (Clone, PartialEq)]struct Video { id: usize, title: String, speaker: String, url: String, } 


Now, we can update our App component to make use of VideosList component. 


By looking at the browser window, we can verify that the lists are rendered as they should be. We have 
moved the rendering logic of lists to its component. This shortens the App componentas source code, 
making it easier for us to read and understand. 


Making it interactivda] 


The final goal here is to display the selected video. To do that, VideosList component needs to 
"notify" its parent when a video is selected, which is done via a Callback. This concept is called 
"passing handlers". We modify its props to take an on_click callback: 


#[derive (Properties, PartialEq)]struct VideosListProps { videos: Vec<Video>,+ on_click: Callback<Video>} 
Then we modify the VideosList component to "emit" the selected video to the callback. 


Next, we need to modify the usage of VideosList to pass that callback. But before doing that, we 
should create a new component, VideoDet ails, that is displayed when a video is clicked. 


Now, modify the App component to display VideoDet ails component whenever a video is selected. 


Do not worry about the use_st ate right now, we will come back to that later. Note the trick we pulled 
with { for details }.Option<_> implements Iterator so we can use it to display the only 
element returned by the Iterator witha special { for ... } syntax supported by the htm1! 
macro. 


Handling statdal 


Remember the use_state used earlier? That is a special function, called a "hook". Hooks are used to 
"hook" into the lifecycle of a function component and perform actions. You can learn more about this 
hook, and others here. 


ate” 


Struct components act differently. See the documentation to learn about those. 


Fetching data (using external REST APT) 


In a real-world application, data will usually come from an API instead of being hardcoded. Let’s fetch 
our videos list from an external source. For this we will need to add the following crates: 
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e [gloo-net}For making the fetch call. 
e [serde]with derive features For de-serializing the JSON response 


® jwasm-bindgen-futures|For executing Rust Future as a Promise 


Let’s update the dependencies in Cargo.toml file: 

Cargo.toml 

[dependencies]gloo-net = "0.2"serde = { version = "1.0", features = ["derive"] }wasm-bindgen-futures = "0.4" 
ates” 


When choosing dependencies make sure they are wasm32 compatible! Otherwise you won’t be able to 
run your application. 


Update the Video struct to derive the Deserialize trait: 


+ use serde::Deserialize;- #[derive (Clone, PartialEq)]+ #[derive(Clone, PartialEq, Deserialize)]struct Video { id: usize, title: String, speaker: String, url: String, } 
Now as the last step, we need to update our App component to make the fetch request instead of using 
hardcoded data 

ates” 


We are using unwraps here because this is a demo application. In a real-world app, you would likely 


want to have|proper error handling 


Now, look at the browser to see everything working as expected... which would have been the case if it 
were not for CORS. To fix that, we need a proxy server. Luckily trunk provides that. 


Update the following line: 


Wl oveem let fetched_videos: Vec<Video> = Request: :get ("https://yew.rs/tutorial/data. json") + let fetched_videos: Vec<Video> = Request: :get ("/tutorial/data.json")// .. 


Now, rerun the server with the following command: 


trunk serv proxy-backend=https://yew.rs/tutorial 


Refresh the tab and everything should work as expected. 


Wrapping upll 


Congratulations! Youdave created a web application that fetches data from an external API and displays a 
list of videos. 
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What’s next] 


This application is very far from perfect or useful. After going through this tutorial, you can use it as a 
jumping-off point to explore more advanced topics. 


Stylesal 


Our apps look very ugly. There is no CSS or any kind of style. Unfortunately, Yew does not offer a 
built-in way to style components. See[Trunk’s assets]to learn how to add style sheets. 


More librariega| 


Our app made use of only a few external dependencies. There are lots of crates out there that can be used. 
See external libraries for more details. 


Learning more about Yew4l 


Read our|official documentation] It explains a lot of concepts in much more detail. To learn more about 
the Yew API, see our|API docs 
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e 
@ Awesome Yew 


On this page 
Awesome Yew 


Projectsa| 


@ {Realworld example}- Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes 
Yew’s latest function components and hooks. It also supports desktop application powered 


by [Tauri] 

[webapp.rs]- A web application completely written in Rust, frontend is built with Yew. 
[Rust-Full-Stack]- Easily testable and working Rust codes with blog posts to explain them. 
[Bucket Questions]- A webapp written entirely in Rust for a dumb party game. 

[web-view todomve desktop app]- Demo how to use yew for a todomvc that compiles to 


WebAssembly and is bundled as a lightweight(~2mb) desktop app by[web-view] as an alternative to 


Electron, [web-view]also has a{demo| 
e [yew-react-example]- This project shows how to create a web app using a React component inside a 


Yew component. 
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Kirk|- Just A Rust WebAssembly Blog. 


[rust-async-wasm-demo]- Toy project to learn Rust and async that can be deployed to the web. 


[karaoke-rs]- A simple, network enabled karaoke player in Rust. 
Love Hue! (rs)}- A clone of the mobile game I Love Hue in Yew (Rust). 


[yew-styles-page]- This is an initial project of a framework style for yew. 


[caniuse.rs]- Rust feature search. 
- An example of building a Rust based web app (Yew) into a native app 


using electron. 

[covplot]- Live graphs of worldwide CoVID-19 data. 

‘Tanoshi|- Tachiyomi-like web manga reader. Front-end for tanoshi. 
Minesweeper|- Minesweeper built with Rust, Yew and WebAssembly. 
Freecellj- A patience game written in Rust and Yew. 


[Daydream]- A small Matrix web client written in Rust. 
Yew-WebRTC-Chat|- A simple WebRTC chat made with Yew. 
Yew Fullstack Boilerplate|- Highly opinionated boilerplate for creating full stack applications with 


Rust. 
Chord Quiz]- Practice recognizing chords in this Rust/Yew/WebAssembly app. 


[DevAndDev]- A website where developers can find pair-programming partners. Written in Rust, Yew 
frontend. 

[yew-octicons]- An easy interface for using Octicons in Yew projects. 

[Pipe]- This is a Rust / Wasm client web app which is a task control center. 

[note-to-yew]- Convert your markups into Yew macro online, which is also made by Yew. 
[ASCII-Hangman]- Configurable Hangman game for children with ASCII-art rewarding. 

[dotdotyew] -[Dot-voting]using Yew, with Rust powering the backend API. 


wasm-2048]- 2048 game implemented with Rust and Yew and compiled to Wasm. 


[website-wasm]- My personal website written in Rust via Yew/Wasm. 
[KeyPress]- A Rust WebAssembly Website example for practising english for chinese. 


[yew-train-ticket]- A Rust WebAssembly Webapp example basing Yew newest hooks and functional 
API, the code style is extremely like React Function Component. 


- Showing a d3 chart with Yew. 
- A feed reader written in Rust with a Yew frontend. 


[Flow.er]- A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, 
Yew and Trunk. 

Fullstack-Rust|- A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS 
and Diesel. 


- A simple example of a sea battle game. Rust + Yew. 
tide-async-graphql-mongodb]- Clean boilerplate for graphql services, with wasm/yew frontend. 


[surfer]- A blog built on yew + graphal, with|live demo site Backend for graphql services, and 


frontend for web application. 


[qubit] - A handy calculator, based on Rust and WebAssembly, [Live Demo} 


- A reimplementation of the excellent word game Wordle by Josh Wardle. 


Rust algorithms|- A website with interactive implementations of various algorithms (only sorting 
algorithms for now). 
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- A software developer portfolio, [Live Demo] 
[zzhack]- A personal blog, based on Rust & Yew, 
[viz.rs|- A website for viz web framework, 
urlurl]- A randomizing link shortener, [Live Demo] 
[Macige]- CI workflow generator for mobile app development, 
[Spaceman]- A cross-platform and graphical client for the gRPC communication protocol. 


E 


Templatesal 
e - Set up a modern Yew web app by running one command, npx 


create-yew-app my-app. 
@ |yew-wasm-pack-template|- A template for starting a Yew project to be used with wasm-pack. 
e [yew-wasm-pack-minimal]- A minimal template for starting a Yew project using wasm-bindgen and 


wasm-pack. 


® |yew-parcel-template]- Awesome Yew with Yew-Router and Parcel application. 


Crategal 
Component Libraries] 


e [yew-mdc]- Material Design Components for the Yew framework. 
e [muicss-yew]- MUI-CSS Components for Yew framework. 
® 


[yew-bulmal]- A Rust library providing components based on the bulma css library for projects using 
Yew. 


e [material-yew]- Yew wrapper for Material Web Components. 

e [Yewprint]- Port of blueprintjs.com to Yew. 

e [ybc]- A Yew component library based on the Bulma CSS framework. 
e [patternfly-yew]- Patternfly components for Yew. 

e [yew-feather]- Feather Icons components for Yew. 

e 
e 
e 


tailwind-yew-builder|- Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk. 


[yew-components]- Material Design Components for the Yew framework. 
[yew-chart]- A Yew-based charting library that provides SVG based components for rendering charts. 


Componentga] 


e [Yew Form]- Components to simplify handling forms with Yew. 


e [yew-component-size]- A Yew component that emits events when the parent component changes 
width/height. 


® |yew-virtual-scroller|- A Yew component for virtual scrolling / scroll windowing. 


e [yew-autoprops|- proc-macro to automatically derive Properties structs from args for Yew 
components. 
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Hook] 


e [yew-hooks]- Custom Hooks library for Yew, inspired by|streamich/react-use]and alibaba/hooks 
e - Reconcile Side Effects in Yew Applications, inspired by and 
react-helmet| 


react-helmet 
e - The uncomplicated state management library for Yew, inspired by[Redux]and [Recoil] 


Utils] 


e [Yewdux]- Redux-like state containers for Yew apps. 

e [reacty_yew]- Generate Yew components from React components via Typescript type definitions. 
e [styled-yew]- CSS in Rust, similar to styled-components, but for Yew. 

e [stylist-rs]- A CSS-in-Rust styling solution for WebAssembly Applications. 

e 
e 


[Yew Interop]- Load JavaScript and CSS asynchronously in Yew. 
Tailwind RS| 


Tailwind RS|- Tailwind style tracer in rust, JIT + AOT interpreter. 


Wasni| 


e [wasm-bindgen]- Facilitating high-level interactions between WebAssembly modules and JavaScript. 
e - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability 
between Rust and JavaScript. 


Tooling§l 


e [wasm-pack]- Your favorite Rust -> WebAssembly workflow tool. 
e [wasm-pack-action]- Github action to install wasm—pack by downloading the executable to speed up 
CI/CD. 


e [wasm-bindgen-action]- Github action to install wasm—bindgen by downloading the executable to 
speed up CI/CD. 


[cargo-web]- A Cargo subcommand for the client-side Web. 
Trunk|- Build, bundle & ship your Rust Wasm application to the web. 
{trunk-action]- Github action to install Trunk by downloading the executable to speed up CI/CD. 


[wabt]- The WebAssembly Binary Toolkit, for the wasm—st rip and wasm—objdump tools to 
reduce .wasm file size. 


e [binaryen]- Compiler infrastructure and toolchain library for WebAssembly, for the wasm-—opt tool 
to reduce .wasm file size. 


Articlega] 


i 


et’s Build a Rust Frontend with Yew 


e 
e Web Application completely in Rust 
e 
e 


> 


Yew - Rust & WebAsse-frontend framework 


Create a desktop app in Rust using Tauri and Yew 


@ {A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter 
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Booksal 


The WebAssembly Book]- Working with the web and producing .wasm files. 


The wasm-bindgen Guide]- How to bind Rust and JavaScript APIs. 
he wasm-pack Guide|- How to build and work with rust-generated WebAssembly. 


Programming WebAssembly with Rust|- Includes a chapter Advanced JavaScript 


Integration with Yew on creating an app with Yew. 


@ |Creative Projects for Rust Programmers|- Chapter 5, Creating a Client-Side 


WebAssembly App Using Yew. 


) 


Alternativega] 


Yew team love to share ideas with other projects and believe we can all help each other reach the full 
potential of this exciting new technology. 


e [Draco]- A Rust library for building client side web applications with WebAssembly. 

e [Percy]- A modular toolkit for building isomorphic web apps with Rust + WebAssembly. 
@ |Sauron|- Sauron is an HTML web framework for building web-apps. 

@ |Seed]- A Rust framework for creating web apps. 

e 

® 


liveview, and more. 
e [Sycamore]- A reactive library for creating web apps in Rust and WebAssembly. 


Related lists] 
@ {Awesome Rust and WebAssembly]- A list of awesome Rust and WebAssembly projects, libraries, 


tools, and resources. 


@ |Awesome WebAssembly|- Collection of awesome things regarding WebAssembly ecosystem. 
e [Awesome Rust|- A curated list of Rust code and resources. 


Next 
Libraries 


Component Libraries 
Components 
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20238! 9x223a¥ A- One min read 


97 


Muhammad Hamza 


Maintainer of Yew 


The Yew development team is thrilled to unveil Yew 0.21.0, a significant milestone in the journey of 
empowering developers to create dependable and high-performance web applications with Rust. Let’s dive 
into the major highlights of this release. 


What’s newél 
1. Changing Signatures: A Shift in Hook Dependenciesal 


One of the significant changes in Yew 0.21 is the adjustment to the signature of hooks that accept 
dependencies. Dependencies used to be passed as the second argument after the closure. However, now 
they’ re passed as the first argument before the closure. 


use_effect_with_deps(deps, move |deps: Vec<i32>| { // Do something with dependencies}) ; 


The reason behind swapping the order of dependencies in the code snippet is to address a specific use 
case. In situations where the same value is needed both to compute a dependency and to be moved by 
value into the closure, the new order simplifies the code and improves readability and ergonomics. 


This is a big breaking change so we’ ve provided|a way to automate the refactor] 
2. Versatile Child Types] 


Yew now allows you to use any type as children within your components. This means you’ re no longer 
limited to just the Children type. Instead, you can use any type, even Htm1 or closures, unlocking 
patterns such as: 


html! { <Comp> { |p: RenderProps | html! {<>{"Hello, "}{p.name}</>}} </Comp> } 


3. Agents: A Complete Rewritda] 


Yew 0.21 brings a complete rewrite of yew-agent. This streamlines and simplifies the way workers 
operate. Here’s what you need to know: 


e@ Introducing Providers: Say goodbye to the old Worker: : bridge () method. Now, you can use 
the use WorkerProvider/ ReactorProvider /OneshotProvider as per your need, by 
creating them using the hooks. 


@ WorkerLink to WorkerScope: We’ve removed WorkerLink in favor of WorkerScope. This change 
simplifies the worker architecture, making it more straightforward to manage and maintain. 


There are now 3 types of agents to be used, depending upon the situation: 
@ Worker Agent: The original agent that uses an actor model, designed to handle complex states. 


@ Oneshot Agent: Designed for scenarios where you expect a single input and a single output for each 
agent. 


@ Reactor Agent: Ideal for situations where multiple inputs and multiple outputs are needed for each 
agent. 


Learn more in|documentation of yew-agent 


4. Performance Improvements: A Faster and Smoother ExperiencdAl 


Yew 0.21 brings substantial performance improvements. Your web applications will run faster and more 
efficiently, thanks to optimizations that reduce memory usage and enhance rendering. 


Call for Contributors] 


The Yew project thrives on community involvement, and we welcome contributors with open arms. 
Whether you’ re an experienced Rust developer or just starting your journey, there are plenty of ways to 
get involved and make a meaningful impact on Yew’s growth. 
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Here are some areas where you can contribute: 


© Code Contributions: If you’re passionate about web development with Rust, consider contributing 
code to Yew. Whether it’s fixing bugs, adding new features, or improving documentation, your code 
can help make Yew even better. 


@ Documentation: Clear and comprehensive documentation is vital for any project’s success. You can 
contribute by improving documentation, writing tutorials, or creating examples that help others 
understand and use Yew effectively. 


e Testing and Bug Reporting: Testing Yew and reporting bugs you encounter is a valuable 
contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for 
everyone. 


@ Community Support: Join discussions, chat rooms (we have our own Discord and Matrix!), or 
social media to assist other developers using Yew. Sharing your knowledge and helping others solve 
problems is a fantastic way to contribute. 


Contributing to open-source projects like Yew is not only a way to give back to the community but also an 
excellent opportunity to learn, collaborate, and enhance your skills. 


To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions 
are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting 
journey! 


Thanks] 


Many people came together to create Yew 0.21. We couldn’t have done it without all of you. Thanks! 


See|the full changelog| 
Releasing Yew 0.20 


2022811 1e24a¥ A- One min read 
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Muhammad Hamza 


Maintainer of Yew 


The Yew team is happy to announce a new, long overdue, version of Yew: v0.20. Yew is a framework for 
creating reliable and efficient web applications. 


Tags: 
® release 


Read More 


Hello Yew 


20228! ’1e20e¥ A- One min read 
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Muhammad Hamza 


Maintainer of Yew 
This is the first Yew blog post. 


Read More 
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g774 ,4,"*¢@ag App 
élaaa»A, 44°C, aT Ej 'c®: 
cargo new -—-bin yew-app && cd yew-app 


za yew a°al2 casadyara,-iV4ez6] a d>¥e¥cxee °caeag Yewi!4 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"authors = ["Yew App Developer <[email protected]>"Jedition = "2018"[dependencies]yew = { version = "0.14.3", features = ["std_web"] 


a°edmlVriim£e anala°az ¢ src/main.rs xa»fi,-: 


src/main.rs 


el arlrain£e aoa» dl ec§°a,° Model ¢ Component 

@ Ioan iza@aer%crea a “xé@ilsalrilr clana@ei4AModel a°alse e°e*a-tcc]eacla«e*'e main () 
a,-¢ App: :<Model>: :new() .mount_to_body () iMa@ala'aal2 ca°calfacafee22a°é | uége 
<body> e@ ¢-344,-aaleal 234!2j ¢a»»ilra eateSe¥a aac Ca ilsaad am¥alr co” 

App: :<Model>::new() .mount_to_body_with_props(..)a 


&gejas ca°o"¢'a’ Ml 


a aal]é ej al ca°¢ caay«exlalsacte alg |cargo—webhajeals é,xe2jece 14 -¢° cargo install 
cargo-—web aVrinte¥a®@e£ez a,2a-¥a-c]ace yey ej 4,6; °avaimte ¥eea»°aa aaa “alsaceaja iA 


cargo web start 


cargo-web a°alAe*a''a ,°4'2 2-»>a wasm32-unknown-unknown 
Ai °c@e anf Mc ]aeandlr cao 14a ca°o'a°E»é @naa[http://[::1]:8000|e¢ «<E®@ E@AA A»¥ES, cargo 
web start -—help alpinte¥é-ae “anéé|'!aa, @aOa 
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° 

° 

e@ |Custom Componentsi!4e"a®@a! Component ¢»a» {4 

e i i Aare’: cc” Agentsi!4(stdweb) 
@ |Multi-threading (Agents)i!Aaxc’; c” Agentst!4(web_sys) 
@ |Timer Servicei!A4e®jxJa 1A 
@ |Nested Componentsi4aupa¥ Component ca» ii4 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 
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VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isJavaliable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust": "html", } 


Neovinia] 
Lazyvimia] 


Below configuration works with[Lazy Vim]configuration and lazy.vim plugin, create a file in 
lua/plugins/nvim—lspconfig.1ua (or update your 1spconfig) with: 


return { { "neovim/nvim-lspconfig", init_options = { userLanguages = { eelixir = "html-eex", eruby = "erb", rust = "html", Fe }, 


e@ |Add a template for creating components 


JetBrains IDEs 


@ |Support for the html! Macro 
JetBrains IDEs 
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Version: 0.21 


Yew concepts 


Learn about the important Yew concepts! 


01, Using Basic Web Technologies In Yew 


5 items 


01, Components 
9 items 

o1, HTML 

8 items 

01, Agents 


Yew ¢ Actor ¢3»¢» 


01, Contexts 


Using contexts to pass deeply nested data 


01, Router 


Yew ¢a®ez! Router 


01, Suspense 
Suspense for data fetching 


Editor Setup 
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Using Basic Web Technologies In Yew 
Support 


@ |Sponsor Project 


113 


Participate 


@ [Yew Awesome 


114 


Skip to main content 
Yew Logo Yew Logo 


Docgfutorial 
(CommunityBlogPlayground/A PIGitHub| 
ec¢ 


Getting Started 
Advanced topics 


O a°ata°cad’ cme 

O 

Struct Components 
Children 

e§evralsad, ei3a®@é-u 
Portals 

Server-side Rendering 
Immutable Types 


More 
Migration guides 


00000 


e 
e 
e 
@ Advanced topics 


Version: 0.21 


Advanced topics 


Learn about the advanced topics and inner workings of Yew! 
ee ° ° ° O see AN 

01, a°ata’ca€ cre 

xarejxe]ca°atoné 


01, Struct Components 


6 items 


01, Children 


Inspecting and manipulating Children can often result in surprising and hard-to-explain behaviours in your 
application. 


Oi, BSUAHVAAR weH1/3A@e-p 
a éa ca°c’¢a° 
01, Portals 


Rendering into out-of-tree DOM nodes 


01, Server-side Rendering 


Render Yew on the server-side. 


01, Immutable Types 
Immutable data structures for Yew 
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Miscellaneous 


01, Debugging 


Panics 


01, Deployment 
Deploying Yew applications 
di, CSS 

&lt;sTODO&gt; 

01, ene 
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From 0.20.0 to 0.21.0 


Dependencies as first hook argument and use_effect_withl 


@® Replace use_effect_with_deps with new use_effect_with 
® use_effect_with, use_callback, use_memo now take dependencies as their first argument 


Automated refactor] 
With the help of|ht erep.github.io|Here are commands that can do the refactoring for you. 
Reasoning] 
This will enable more ergonomic use of hooks, consider: 
® Before 
e@ After 


impl SomeLargeStruct { fn id(&self) -> u32; // Only need to use the id as cache key}let some_dep: SomeLargeStruct = todo! ();use_effect_with(some_dep.id(), move |_| { todo!(); drop(some_dep); }); 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 
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Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


® |wasm—pac 


® jwasm-run 


e (still in early development) 


Next steps] 


With your development environment set up, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our 


Installing Rust 


e 
@ |Install WebAssembly target 
e 


Install Trunk 


O |Other options 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 
important 


The minimum supported Rust version (MSRV) for Yew is 1.76.0. Older versions will not compile. You 
can check your toolchain version using rustup show (under "active toolchain") or rustc 
-—-version. To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging and is used throughout the 
documentation and examples. 


Other optional 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


[xtask—wasm|(still in early development) 
Next steps] 


With your development environment setup, you can now either proceed with reading the documentation. 
If you like to learn by getting your hands dirty, we recommend you check out our tutorial. 
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Getting Started 


You will need a couple of tools to compile, build, package and debug your Yew application. When getting 
started, we recommend using[Trunk] Trunk is a WASM web application bundler for Rust. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.1. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called wasm32-unknown-unknown. The following command will 
add the WebAssembly target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunkal 


Trunk is the recommended tool for managing deployment and packaging, and is used throughout the 
documentation and examples. 


Other optionsa] 


There are options other than Trunk that may be used for bundling Yew applications. You might want to try 
one of these options: 


(still in early development) 


Next steps] 


With your development environment setup, you can now proceed with reading the documentation. If you 
like to learn by getting your hands dirty, we recommend you check out our tutorial 
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@ Introduction 
Version: 0.19.0 
On this page 


Project Setup 
Overview4l 


Your local development environment will need a couple of tools to compile, build, package and debug 
your Yew application. 


Installing Rust] 
To install Rust, follow the 


important 


The minimum supported Rust version (MSRV) for Yew is 1.56.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages or outright fail to compile. You can check your 
toolchain version using rustup show (under "active toolchain") or alternatively rustc --version. 
To update your toolchain, run rustup update. 


Install WebAssembly target] 


Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for 
browser-based WebAssembly is called "wasm32-unknown-unknown". The following command will add 
this target to your development environment. 


rustup target add wasm32-unknown-unknown 


Install Trunki] 


Trunk is the recommended tool for managing deployment and packaging, and will be used throughout the 
documentation and examples. See Wasm Build Tools for more information on packaging and alternatives. 


Summary] 


Now that you have all the tools needed, we can build a sample application. 


Next 
Using trunk 
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@ Introduction 


Version: 0.18.0 
On this page 


Project Setup 
Rust] 


First, you’ll need Rust. To install Rust and the cargo build tool, follow the 


You also need to install the wasm32-unknown-unknown target to compile Rust to Wasm. If you’re 
using rustup, you just need to run rustup target add wasm32-unknown-unknown. 


important 


The minimum supported Rust version (MSRV) for Yew is 1.49.0. Older versions can cause unexpected 
issues accompanied by incomprehensible error messages. You can check your toolchain version using 
rustup show (under "active toolchain") or alternatively rustc -—-version. To update your 
toolchain, run rustup update. 


Wasm Build Tools| 


Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally, 
depending on the tool you choose, they can help make deployment and packaging much less of a headache 
by generating all of the JavaScript code necessary to load and run your app’s . wasm binary in a browser. 


it runkp 


A tool practically made for building Yew apps. It can build any wasm—bindgen based app and its design 
is inspired by rollup.js. With Trunk you don’t need to have Node.js installed or touch any JavaScript code 
for that matter. It can bundle assets for your app and even ships with a Sass compiler. 


All of our examples are built with Trunk. 


Getting started with trunk 


A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used 
together with the[wasm—pack-plugin]for Webpack. The primary purpose of wasm—pack is building 


Wasm libraries for use in JavaScript. Because of this, it can only build libraries and doesn’t provide useful 
tools like a development server or automatic rebuilds. 
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Get started with wasm—pack 


cargo-werfi 


This was the best preferred tool to use before the creation of wasm—bindgen. 


Getting started with cargo web 


Comparison] 


trunk wasm-—pack cargo-web 
Eecieet Actively maintained eolively —— temee Ryne No Github activity for over 6 months 
Status 'Wasm Working Group 
Bare-bones. You’ll need to write 
Dev Just works! Batteries included, no some scripts to streamline the Works great for code but needs separate 
Experience _—_ external dependencies needed. experience or use the webpack asset pipeline. 
plugin. 

rece Supported Only with webpack plugin Supported 
Server upp y with webpack plugi upp 
Auto 
rebuild on F F 
local Supported Only with webpack plugin Supported 
changes 
aes Supported Only with webpack plugin Static assets onl 
handling PP y Pee Se : y 
Headless 
Browser Supported Supported 
Testing 
s par @® wasm32-unknown-unknown 
tera “ ® wasm32-unknown-unknown @® wasm32-unknown-unknown @® wasm32-unknown-emscripten 

me ® asmjs-unknown-emscripten 
web-sys Compatible Compatible Incompatible 
stdweb Incompatible Compatible Compatible 
Eevee sepia for yew-stdweb examples 
Usage ple app y ples 


Using trunk 
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Version: 0.21 
On this page 


Tutorial 


Introduction] 


In this hands-on tutorial, we will take a look at how we can use Yew to build web applications. Yew is a 


modern [Rust] framework for building front-end web apps using]WebAssembly| Yew encourages a 


reusable, maintainable, and well-structured architecture by leveraging Rust’s powerful type system. A 
large ecosystem of community-created libraries, known in Rust as[crates| provide components for 


commonly-used patterns such as state management. the package manager for Rust, allows us to 
take advantage of the numerous crates available on such as Yew. 
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What we are going to buildal 


Rustconf is an intergalactic gathering of the Rust community that happens annually. Rustconf 2020 had a 
plethora of talks that provided a good amount of information. In this hands-on tutorial, we will be building 
a web application to help fellow Rustaceans get an overview of the talks and watch them all from one 


page. 


Setting upél 
Prerequisitesa| 


This tutorial assumes you are already familiar with Rust. If you are new to Rust, the free|Rust Book]offers 
a great starting point for beginners and continues to be an excellent resource even for experienced Rust 
developers. 


Ensure the latest version of Rust is installed by running rustup update or byjinstalling rustif you 
have not already done so. 


After installing Rust, you can use Cargo to install t runk by running: 


cargo install trunk 


We will also need to add the WASM build target by running: 


rustup target add wasm32-unknown-unknown 


Setting up the project] 
First, create a new cargo project: 
cargo new yew-appcd yew-app 


To verify the Rust environment is set up properly, run the initial project using the cargo build tool. After 
the output about the build process, you should see the expected "Hello, world!" message. 


cargo run 


Our first static pagdal 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. Update the files as follows: 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] } 


ay je 
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You only need the feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering-related code. 


If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


src/main.rs 


use yew::prelude::*;#[function_component (App) ]fn app() -> Html { html! { <hl>{ "Hello World" }</h1> }}fn main() { yew: :Renderer: :<App>::new() .render();} 
Now, let’s create an index.html] at the root of the project. 


index.html 


<!doctype html><html lang="en"> <head></head> <body></body></htm1> 


Start the development server] 


Run the following command to build and serve the application locally. 
trunk serve --open 

Ajj 

Remove option ’--open’ to not open your default browser trunk serve. 


Trunk will open your application in your default browser, watch the project directory and helpfully rebuild 
your application if you modify any source files. This will fail if the socket is being used by another 
application. By default server will listening at address ’127.0.0.1’ and port ’8080’ => 

To change it, create the following file and edit as needed: 


Trunk.toml 


[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


If you are curious, youcanrun trunk helpandtrunk help <subcommand> for more details on 
what is happening. 


Congratulations] 


You have now successfully set up your Yew development environment and built your first Yew web 
application. 
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Building HTMLA| 


Yew makes use of Rust’s procedural macros and provides us with a syntax similar to JSX (an extension to 
JavaScript which allows you to write HTML-like code inside JavaScript) to create the markup. 


Converting classic HTM14] 


Since we already have a pretty good idea of what our website will look like, we can simply translate our 
mental draft into a representation compatible with htm1!. If you are comfortable writing simple HTML, 
you should have no problem writing marking inside ht m1 !. It is important to note that the macro does 
differ from HTML in a few ways: 


1. Expressions must be wrapped in curly braces ({  }) 

2. There must only be one root node. If you want to have multiple elements without wrapping them in a 
container, an empty tag/fragment (<> ... </>) is used 

3. Elements must be closed properly. 


We want to build a layout that looks something like this in raw HTML: 


Now, let’s convert this HTML into htm1!. Type (or copy/paste) the following snippet into the body of 
app function such that the value of htm1! is returned by the function 


Refresh the browser page, and you should see the following output displayed: 
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C QQ © 127.0.0.1:8080 


RustConf Explorer 


Videos to watch 


John Doe: Building and breaking things 
Jane Smith: The development process 
Matt Miller: The Web 7.0 


Tom Jerry: Mouseless development 


John Doe: Building and breaking things 


Video Player Placeholder 


Using Rust language constructs in the markupia| 


A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup. Now, 
instead of hardcoding the list of videos in the HTML, let’s define them as a Vec of Video structs. We 
create a simple st ruct (in main. rs or any file of our choice) that will hold our data. 


struct Video { id: usize, title: String, speaker: String, url: String, } 
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Next, we will create instances of this struct in our app function and use those instead of hardcoding the 
data: 


To display them, we need to convert the Vec into Html. We can do that by creating an iterator, mapping 
it to html! and collecting it as Html: 


let videos = videos.iter().map(|video| html! { <p key=(video.id}>{format!("{}: {}", video.speaker, video.title) }</p>}) «collect: :<Htm1>(); 


age 


Keys on list items help Yew keep track of which items have changed in the list, resulting in faster 
re-renders. It is always recommended to use keys in lists. 


And finally, we need to replace the hardcoded list of videos with the Htm1 we created from the data: 


Componentsal 


Components are the building blocks of Yew applications. By combining components, which can be made 
of other components, we build our application. By structuring our components for re-usability and keeping 
them generic, we will be able to use them in multiple parts of our application without having to duplicate 
code or logic. 


The app function we have been using so far is a component, called App. It is a "function component". 
There are two different types of components in Yew. 


1. Struct Components 
2. Function Components 


In this tutorial, we will be using function components. 


Now, let’s split up our App component into smaller components. We begin by extracting the videos list 
into its own component. 


Notice the parameters of our VideosList function component. A function component takes only one 
argument which defines its "props" (short for "properties"). Props are used to pass data down from a 
parent component to a child component. In this case, VideosListProps is a struct that defines the 


props. 
important 
The struct used for props must implement Properties by deriving it. 


For the above code to compile, we need to modify the Video struct like this: 
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#[derive (Clone, PartialEq)]struct Video { id: usize, title: String, speaker: String, url: String, } 


Now, we can update our App component to make use of VideosList component. 


By looking at the browser window, we can verify that the lists are rendered as they should be. We have 
moved the rendering logic of lists to its component. This shortens the App componentas source code, 
making it easier for us to read and understand. 


Making it interactivda] 


The final goal here is to display the selected video. To do that, VideosList component needs to 
"notify" its parent when a video is selected, which is done via a Callback. This concept is called 
"passing handlers". We modify its props to take an on_click callback: 


#[derive (Properties, PartialEq)]struct VideosListProps { videos: Vec<Video>,+ on_click: Callback<Video>} 
Then we modify the VideosList component to "emit" the selected video to the callback. 


Next, we need to modify the usage of VideosList to pass that callback. But before doing that, we 
should create a new component, VideoDet ails, that is displayed when a video is clicked. 


Now, modify the App component to display VideoDet ails component whenever a video is selected. 


Do not worry about the use_st ate right now, we will come back to that later. Note the trick we pulled 
with { for details }.Option<_> implements Iterator so we can use it to display the only 
element returned by the Iterator witha special { for ... } syntax supported by the htm1! 
macro. 


Handling statdal 


Remember the use_state used earlier? That is a special function, called a "hook". Hooks are used to 
"hook" into the lifecycle of a function component and perform actions. You can learn more about this 
hook, and others here. 


ae» 


Struct components act differently. See the documentation to learn about those. 


Fetching data (using external REST APT) 


In a real-world application, data will usually come from an API instead of being hardcoded. Let’s fetch 
our videos list from an external source. For this we will need to add the following crates: 
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e [gloo-net}For making the fetch call. 
e [serde]with derive features For de-serializing the JSON response 


® jwasm-bindgen-futures|For executing Rust Future as a Promise 


Let’s update the dependencies in Cargo.toml file: 

Cargo.toml 

[dependencies]gloo-net = "0.2"serde = { version = "1.0", features = ["derive"] }wasm-bindgen-futures = "0.4" 
ae’ 


When choosing dependencies make sure they are wasm32 compatible! Otherwise you won’t be able to 
run your application. 


Update the Video struct to derive the Deserialize trait: 


+ use serde::Deserialize;- #[derive(Clone, PartialEq)]+ #[derive(Clone, PartialEq, Deserialize)]struct Video { id: usize, title: String, speaker: String, url: String,} 


Now as the last step, we need to update our App component to make the fetch request instead of using 
hardcoded data 


ae» 


We are using unwraps here because this is a demo application. In a real-world app, you would likely 


want to have|proper error handling 


Now, look at the browser to see everything working as expected... which would have been the case if it 
were not for CORS. To fix that, we need a proxy server. Luckily trunk provides that. 


Update the following line: 


Wl oveem let fetched_videos: Vec<Video> = Request: :get ("https://yew.rs/tutorial/data. json") + let fetched_videos: Vec<Video> = Request: :get ("/tutorial/data.json")// ... 


Now, rerun the server with the following command: 


trunk serv proxy-backend=https://yew.rs/tutorial 


Refresh the tab and everything should work as expected. 


Wrapping upll 


Congratulations! Youdave created a web application that fetches data from an external API and displays a 
list of videos. 
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What’s next] 


This application is very far from perfect or useful. After going through this tutorial, you can use it as a 
jumping-off point to explore more advanced topics. 


Stylesal 


Our apps look very ugly. There is no CSS or any kind of style. Unfortunately, Yew does not offer a 
built-in way to style components. See[Trunk’s assets]to learn how to add style sheets. 


More librariega| 


Our app made use of only a few external dependencies. There are lots of crates out there that can be used. 
See external libraries for more details. 


Learning more about Yew4l 


Read our|official documentation] It explains a lot of concepts in much more detail. To learn more about 
the Yew API, see our|API docs 
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@ Awesome Yew 


On this page 
Awesome Yew 


Projectsa| 


@ {Realworld example}- Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes 
Yew’s latest function components and hooks. It also supports desktop application powered 


by [Tauri] 

[webapp.rs]- A web application completely written in Rust, frontend is built with Yew. 
[Rust-Full-Stack]- Easily testable and working Rust codes with blog posts to explain them. 
[Bucket Questions]- A webapp written entirely in Rust for a dumb party game. 

[web-view todomve desktop app]- Demo how to use yew for a todomvc that compiles to 


WebAssembly and is bundled as a lightweight(~2mb) desktop app by[web-view] as an alternative to 


Electron, [web-view]also has a{demo| 
e [yew-react-example]- This project shows how to create a web app using a React component inside a 


Yew component. 
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Kirk|- Just A Rust WebAssembly Blog. 


[rust-async-wasm-demo]- Toy project to learn Rust and async that can be deployed to the web. 


[karaoke-rs]- A simple, network enabled karaoke player in Rust. 
Love Hue! (rs)}- A clone of the mobile game I Love Hue in Yew (Rust). 


[yew-styles-page]- This is an initial project of a framework style for yew. 


[caniuse.rs]- Rust feature search. 
- An example of building a Rust based web app (Yew) into a native app 


using electron. 

[covplot]- Live graphs of worldwide CoVID-19 data. 

‘Tanoshi|- Tachiyomi-like web manga reader. Front-end for tanoshi. 
Minesweeper|- Minesweeper built with Rust, Yew and WebAssembly. 
Freecellj- A patience game written in Rust and Yew. 


[Daydream]- A small Matrix web client written in Rust. 
Yew-WebRTC-Chat|- A simple WebRTC chat made with Yew. 
Yew Fullstack Boilerplate|- Highly opinionated boilerplate for creating full stack applications with 


Rust. 
Chord Quiz]- Practice recognizing chords in this Rust/Yew/WebAssembly app. 


[DevAndDev]- A website where developers can find pair-programming partners. Written in Rust, Yew 
frontend. 

[yew-octicons]- An easy interface for using Octicons in Yew projects. 

[Pipe]- This is a Rust / Wasm client web app which is a task control center. 

[note-to-yew]- Convert your markups into Yew macro online, which is also made by Yew. 
[ASCII-Hangman]- Configurable Hangman game for children with ASCII-art rewarding. 

[dotdotyew] -[Dot-voting]using Yew, with Rust powering the backend API. 


wasm-2048]- 2048 game implemented with Rust and Yew and compiled to Wasm. 


[website-wasm]- My personal website written in Rust via Yew/Wasm. 
[KeyPress]- A Rust WebAssembly Website example for practising english for chinese. 


[yew-train-ticket]- A Rust WebAssembly Webapp example basing Yew newest hooks and functional 
API, the code style is extremely like React Function Component. 


- Showing a d3 chart with Yew. 
- A feed reader written in Rust with a Yew frontend. 


[Flow.er]- A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, 
Yew and Trunk. 

Fullstack-Rust|- A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS 
and Diesel. 


- A simple example of a sea battle game. Rust + Yew. 
tide-async-graphql-mongodb]- Clean boilerplate for graphql services, with wasm/yew frontend. 


[surfer]- A blog built on yew + graphal, with|live demo site Backend for graphql services, and 


frontend for web application. 


[qubit] - A handy calculator, based on Rust and WebAssembly, [Live Demo} 


- A reimplementation of the excellent word game Wordle by Josh Wardle. 


Rust algorithms|- A website with interactive implementations of various algorithms (only sorting 
algorithms for now). 
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- A software developer portfolio, [Live Demo] 
[zzhack]- A personal blog, based on Rust & Yew, 
[viz.rs|- A website for viz web framework, 
urlurl]- A randomizing link shortener, [Live Demo] 
[Macige]- CI workflow generator for mobile app development, 
[Spaceman]- A cross-platform and graphical client for the gRPC communication protocol. 


E 


Templatesal 
e - Set up a modern Yew web app by running one command, npx 


create-yew-app my-app. 
@ |yew-wasm-pack-template|- A template for starting a Yew project to be used with wasm-pack. 
e [yew-wasm-pack-minimal]- A minimal template for starting a Yew project using wasm-bindgen and 


wasm-pack. 


® |yew-parcel-template]- Awesome Yew with Yew-Router and Parcel application. 


Crategal 
Component Libraries] 


e [yew-mdc]- Material Design Components for the Yew framework. 
e [muicss-yew]- MUI-CSS Components for Yew framework. 
® 


[yew-bulmal]- A Rust library providing components based on the bulma css library for projects using 
Yew. 


e [material-yew]- Yew wrapper for Material Web Components. 

e [Yewprint]- Port of blueprintjs.com to Yew. 

e [ybc]- A Yew component library based on the Bulma CSS framework. 
e [patternfly-yew]- Patternfly components for Yew. 

e [yew-feather]- Feather Icons components for Yew. 

e 
e 
e 


tailwind-yew-builder|- Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk. 


[yew-components]- Material Design Components for the Yew framework. 
[yew-chart]- A Yew-based charting library that provides SVG based components for rendering charts. 


Componentga] 


e [Yew Form]- Components to simplify handling forms with Yew. 


e [yew-component-size]- A Yew component that emits events when the parent component changes 
width/height. 


® |yew-virtual-scroller|- A Yew component for virtual scrolling / scroll windowing. 


e [yew-autoprops|- proc-macro to automatically derive Properties structs from args for Yew 
components. 
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Hook] 


e [yew-hooks]- Custom Hooks library for Yew, inspired by|streamich/react-use]and alibaba/hooks 
e - Reconcile Side Effects in Yew Applications, inspired by and 
react-helmet| 


react-helmet 
e - The uncomplicated state management library for Yew, inspired by[Redux]and [Recoil] 


Utils] 


e [Yewdux]- Redux-like state containers for Yew apps. 

e [reacty_yew]- Generate Yew components from React components via Typescript type definitions. 
e [styled-yew]- CSS in Rust, similar to styled-components, but for Yew. 

e [stylist-rs]- A CSS-in-Rust styling solution for WebAssembly Applications. 

e 
e 


[Yew Interop]- Load JavaScript and CSS asynchronously in Yew. 
Tailwind RS| 


Tailwind RS|- Tailwind style tracer in rust, JIT + AOT interpreter. 


Wasni| 


e [wasm-bindgen]- Facilitating high-level interactions between WebAssembly modules and JavaScript. 
e - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability 
between Rust and JavaScript. 


Tooling§l 


e [wasm-pack]- Your favorite Rust -> WebAssembly workflow tool. 
e [wasm-pack-action]- Github action to install wasm—pack by downloading the executable to speed up 
CI/CD. 


e [wasm-bindgen-action]- Github action to install wasm—bindgen by downloading the executable to 
speed up CI/CD. 


[cargo-web]- A Cargo subcommand for the client-side Web. 
Trunk|- Build, bundle & ship your Rust Wasm application to the web. 
{trunk-action]- Github action to install Trunk by downloading the executable to speed up CI/CD. 


[wabt]- The WebAssembly Binary Toolkit, for the wasm—st rip and wasm—objdump tools to 
reduce .wasm file size. 


e [binaryen]- Compiler infrastructure and toolchain library for WebAssembly, for the wasm-—opt tool 
to reduce .wasm file size. 


Articlega] 


i 


et’s Build a Rust Frontend with Yew 


e 
e Web Application completely in Rust 
e 
e 


> 


Yew - Rust & WebAsse-frontend framework 


Create a desktop app in Rust using Tauri and Yew 


@ {A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter 
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Booksal 


The WebAssembly Book]- Working with the web and producing .wasm files. 


The wasm-bindgen Guide]- How to bind Rust and JavaScript APIs. 
he wasm-pack Guide|- How to build and work with rust-generated WebAssembly. 


Programming WebAssembly with Rust|- Includes a chapter Advanced JavaScript 


Integration with Yew on creating an app with Yew. 


@ |Creative Projects for Rust Programmers|- Chapter 5, Creating a Client-Side 


WebAssembly App Using Yew. 


) 


Alternativega] 


Yew team love to share ideas with other projects and believe we can all help each other reach the full 
potential of this exciting new technology. 


e [Draco]- A Rust library for building client side web applications with WebAssembly. 

e [Percy]- A modular toolkit for building isomorphic web apps with Rust + WebAssembly. 
@ |Sauron|- Sauron is an HTML web framework for building web-apps. 

@ |Seed]- A Rust framework for creating web apps. 

e 

® 


liveview, and more. 
e [Sycamore]- A reactive library for creating web apps in Rust and WebAssembly. 


Related lists] 
@ {Awesome Rust and WebAssembly]- A list of awesome Rust and WebAssembly projects, libraries, 


tools, and resources. 


@ |Awesome WebAssembly|- Collection of awesome things regarding WebAssembly ecosystem. 
e [Awesome Rust|- A curated list of Rust code and resources. 


Next 
Libraries 


Component Libraries 
Components 
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Muhammad Hamza 


Maintainer of Yew 


The Yew development team is thrilled to unveil Yew 0.21.0, a significant milestone in the journey of 
empowering developers to create dependable and high-performance web applications with Rust. Let’s dive 
into the major highlights of this release. 


What’s newél 
1. Changing Signatures: A Shift in Hook Dependenciesal 


One of the significant changes in Yew 0.21 is the adjustment to the signature of hooks that accept 
dependencies. Dependencies used to be passed as the second argument after the closure. However, now 
they’ re passed as the first argument before the closure. 


use_effect_with_deps(deps, move |deps: Vec<i32>| { // Do something with dependencies}) ; 


The reason behind swapping the order of dependencies in the code snippet is to address a specific use 
case. In situations where the same value is needed both to compute a dependency and to be moved by 
value into the closure, the new order simplifies the code and improves readability and ergonomics. 
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This is a big breaking change so we’ ve provided|a way to automate the refactor] 
2. Versatile Child Types] 


Yew now allows you to use any type as children within your components. This means you’ re no longer 
limited to just the Children type. Instead, you can use any type, even Htm1 or closures, unlocking 
patterns such as: 


html! { <Comp> { |p: RenderProps | html! {<>{"Hello, "}{p.name}</>}} </Comp> } 


3. Agents: A Complete Rewritda] 


Yew 0.21 brings a complete rewrite of yew-agent. This streamlines and simplifies the way workers 
operate. Here’s what you need to know: 


e@ Introducing Providers: Say goodbye to the old Worker: : bridge () method. Now, you can use 
the use WorkerProvider/ ReactorProvider /OneshotProvider as per your need, by 
creating them using the hooks. 


@ WorkerLink to WorkerScope: We’ve removed WorkerLink in favor of WorkerScope. This change 
simplifies the worker architecture, making it more straightforward to manage and maintain. 


There are now 3 types of agents to be used, depending upon the situation: 
@ Worker Agent: The original agent that uses an actor model, designed to handle complex states. 


@ Oneshot Agent: Designed for scenarios where you expect a single input and a single output for each 
agent. 


@ Reactor Agent: Ideal for situations where multiple inputs and multiple outputs are needed for each 
agent. 


Learn more in|documentation of yew-agent 


4. Performance Improvements: A Faster and Smoother ExperiencdAl 


Yew 0.21 brings substantial performance improvements. Your web applications will run faster and more 
efficiently, thanks to optimizations that reduce memory usage and enhance rendering. 


Call for Contributors] 


The Yew project thrives on community involvement, and we welcome contributors with open arms. 
Whether you’ re an experienced Rust developer or just starting your journey, there are plenty of ways to 
get involved and make a meaningful impact on Yew’s growth. 


157 


Here are some areas where you can contribute: 


© Code Contributions: If you’re passionate about web development with Rust, consider contributing 
code to Yew. Whether it’s fixing bugs, adding new features, or improving documentation, your code 
can help make Yew even better. 


@ Documentation: Clear and comprehensive documentation is vital for any project’s success. You can 
contribute by improving documentation, writing tutorials, or creating examples that help others 
understand and use Yew effectively. 


e Testing and Bug Reporting: Testing Yew and reporting bugs you encounter is a valuable 
contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for 
everyone. 


@ Community Support: Join discussions, chat rooms (we have our own Discord and Matrix!), or 
social media to assist other developers using Yew. Sharing your knowledge and helping others solve 
problems is a fantastic way to contribute. 


Contributing to open-source projects like Yew is not only a way to give back to the community but also an 
excellent opportunity to learn, collaborate, and enhance your skills. 


To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions 
are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting 
journey! 


Thanks] 


Many people came together to create Yew 0.21. We couldn’t have done it without all of you. Thanks! 


See|the full changelog| 
Releasing Yew 0.20 


2022811 1e24a¥ A- One min read 
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Muhammad Hamza 


Maintainer of Yew 


The Yew team is happy to announce a new, long overdue, version of Yew: v0.20. Yew is a framework for 
creating reliable and efficient web applications. 


Tags: 
® release 


Read More 


Hello Yew 


20228! ’1e20e¥ A- One min read 
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Muhammad Hamza 


Maintainer of Yew 
This is the first Yew blog post. 


Read More 
Support 
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ee 0 ° 
¢774 ag" ja®@¢ App 

élai4aa»°c«a ae °c binary a°ejil4 

cargo new -—-bin yew-app && cd yew-app 

a 83483a°«éL£ja a¥ yew é wasm—bindgeni4e we ockiae«Adeee pA 


Cargo.toml 


[package]name = "yew-app"version = "0.1.0"authors = ["Yew App Developer <[email protected]>"Jedition = "2018"[dependencies]yew = "0.16"wasm-bindgen = "0.2" 
a°a é¢cu’ jaeené£re242 ¢ src/lib.rs xXeji”s 


src/lib.rs 


we" jzeyea»°cY2®@aa« Model ce !aa»] Componenti!4Model xé] cha axéilclal2 ei ,eéeil4 Model 
wee’ e°8"a- teow déelcla¥e? ece i4a" main () é£j¢ 

App: :<Model>: :new() .mount_to_body () ia»eaaal? ¢ app 4,|4,2¢44 Model é£;¢ HTML a° 
<body> e' c+, -aajedl2 erélaaaec’¢ alVseilsa Ja¥aecatrnesiaalr a d»¥elo” 

App: :<Model>::new() .mount_to_body_with_props(..)a 


xara alr ca°ejiseag static Beansilsd le°a¢g index.html x£*eja° static é£j4 
mkdir static 


index.html 


<!doctype html><html lang="en"> <head> <meta charset="utf-a"> <title>Yew Sample App</title> <script type="module"> import init from "./wasm. js" init) </script> </head> <hody></body></htm1> 


A-0j44 ¢ Appit/al 


aio" |wasm—pack|a%4a-6a°eja x b4a¥lrcé wedaledlr éx2eadin»ilrerails4ag’cargo install 
wasm—packa®é£ wasm—pack iAcla%4¢a é¢cadrnil4a»cYr@séaéclhg Arana TA 


wasm-pack build target web out-name wasm out-dir ./static 


wasm-pack ea” ./static é£jc¢cad,a bundlei4é£jé¢aa«a°ejc- eg WebAssemblyil44»¥a JavaScript 
cadL£la ia aete¥; Ered a2 ca°weja-éjxe¢«el4a¥a 


xearailag alr eae-jccfé alA°ea Yanaaa”. /static aa, ce*aja¢ ails 


cargo +nightly install miniserveminiserve ./static --index index.html 


Edit this page 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 
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VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isJavaliable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust": "html", } 


Neovinia] 
Lazyvimia] 


Below configuration works with[Lazy Vim]configuration and lazy.vim plugin, create a file in 
lua/plugins/nvim—lspconfig.1ua (or update your 1spconfig) with: 


return { { "neovim/nvim-lspconfig", init_options = { userLanguages = { eelixir = "html-eex", eruby = "erb", rust = "html", Fe }, 


e@ |Add a template for creating components 


JetBrains IDEs 


@ |Support for the html! Macro 
JetBrains IDEs 
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Version: 0.21 


Yew concepts 


Learn about the important Yew concepts! 


01, Using Basic Web Technologies In Yew 


5 items 


01, Components 
9 items 

o1, HTML 

8 items 

01, Agents 


Yew ¢ Actor ¢3»qut 


01, Contexts 


Using contexts to pass deeply nested data 


Oi, &-¢4a" 


Yew ca®e!é-cta™ 


01, Suspense 
Suspense for data fetching 


Editor Setup 


Next 
Using Basic Web Technologies In Yew 
Support 


@ |Sponsor Project 


171 


Participate 


@ [Yew Awesome 


172 


Skip to main content 
Yew Logo Yew Logo 


Search 


e 

Getting Started 
e 

Advanced topics 


a§é'a°a+ne library 


O 
O 
Struct Components 
Children 
araeedlr3a a7 

Portals 

Server-side Rendering 
Immutable Types 


More 
Migration guides 


00000 


e 
@ Advanced topics 


Version: 0.21 


173 


Advanced topics 


Learn about the advanced topics and inner workings of Yew! 
61, a§é"a°atnc library 

éxelhejxe]ca°atne oo" 

01, Struct Components 


6 items 


01, Children 


Inspecting and manipulating Children can often result in surprising and hard-to-explain behaviours in your 
application. 


O1, a°aésed!/3a 14% 
a 642 ca°ej 
01, Portals 


Rendering into out-of-tree DOM nodes 


01, Server-side Rendering 


Render Yew on the server-side. 


01, Immutable Types 
Immutable data structures for Yew 


Previous 
Suspense 

Next 

agéa°atne library 
Support 


@ (Sponsor Project 


174 


Participate 


@ [Yew Awesome 


175 


Skip to main content 
Yew Logo Yew Logo 


e 

e 

e 

@ 


More 

éné- 
Deployment 
CSS 

2, 7e©} 
Roadmap 


Migration guides 


O0O0000 


e 
@ More 


Version: 0.21 


176 


Miscellaneous 
01, 60" 

Panics 

01, Deployment 
Deploying Yew applications 
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From 0.20.0 to 0.21.0 


Dependencies as first hook argument and use_effect_withl 


@® Replace use_effect_with_deps with new use_effect_with 
® use_effect_with, use_callback, use_memo now take dependencies as their first argument 


Automated refactor] 
With the help of|ht erep.github.io|Here are commands that can do the refactoring for you. 
Reasoning] 
This will enable more ergonomic use of hooks, consider: 
® Before 
e@ After 


impl SomeLargeStruct { fn id(&self) -> u32; // Only need to use the id as cache key}let some_dep: SomeLargeStruct = todo! ();use_effect_with(some_dep.id(), move |_| { todo!(); drop(some_dep); }); 
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Build a sample app 


Once you have the environment ready, you can either choose to use a starter template that contains the 
boilerplate needed for a basic Yew app or manually set up a small project. 


Using a starter templatdal 
Install[cargo—generatelby following their installation instructions then run the following command: 


cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template 


Setting up the application manually] 
Create Project] 


To get started, create a new cargo project. 
cargo new yew-app 
Open the newly created directory. 


cd yew-app 


Run a hello world exampldal 


To verify the Rust environment is set up, run the initial project using cargo run. You should see a 
"Hello World!" message. 


cargo run# output: Hello World! 


Setting up the project as a Yew web application 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. 


Update Cargo.tomla] 


Add yew to the list of dependencies. 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]# this is the development version of Yewyew = { git = "https://github.com/yewstack/yew/", features = ["csr" 


You only need the feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering-related code. 
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If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


Update main.rgal 


We need to generate a template that sets up a root Component called App which renders a button that 
updates its value when clicked. Replace the contents of src/main.rs with the following code. 


note 


The call to yew: :Renderer: :<App>::new().render () inside the main function starts your 
application and mounts it to the page’s <body> tag. If you would like to start your application with any 
dynamic properties, you can instead use 

yew: :Renderer::<App>::with_props(..).render(). 


Create index.htm[A] 


Finally, add an index.html file in the root directory of your app. 


<!doctype html><html> <head> <meta charset="utf-8" /> <title>Yew App</title> </head> <body></body></htm1> 


View your web application] 

Run the following command to build and serve the application locally. 

trunk serve 

info 

Add option ’--open’ to open your default browser trunk serve -—open. 


Trunk will rebuild your application if you modify any of its source code files. By default server will 
listening at address ’127.0.0.1’ and port ’8080’ => |http://localhost:8080| To change it, create the following 
file and edit as needed: 


Trunk.toml 


[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


Congratulations] 


You have now successfully set up your Yew development environment, and built your first web 
application. 
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Experiment with this application and review the [examples|to further your learning. 
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Build a sample app 


Once you have the environment ready, you can either choose to use a starter template that contains the 
boilerplate needed for a basic Yew app or manually set up a small project. 


Using a starter templatdal 
Install[cargo—generatelby following their installation instructions then run the following command: 


cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template 


Setting up the application manually] 
Create Project] 


To get started, create a new cargo project. 
cargo new yew-app 
Open the newly created directory. 


cd yew-app 


Run a hello world exampldal 


To verify the Rust environment is set up, run the initial project using cargo run. You should see a 
"Hello World!" message. 


cargo run# output: Hello World! 


Setting up the project as a Yew web application 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. 


Update Cargo.tomla] 


Add yew to the list of dependencies. 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]# this is the development version of Yewyew = { git = "https://github.com/yewstack/yew/", features = ["csr" 


You only need the feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering-related code. 
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If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


Update main.rgal 


We need to generate a template that sets up a root Component called App which renders a button that 
updates its value when clicked. Replace the contents of src/main.rs with the following code. 


note 


The call to yew: :Renderer: :<App>::new().render () inside the main function starts your 
application and mounts it to the page’s <body> tag. If you would like to start your application with any 
dynamic properties, you can instead use 

yew: :Renderer::<App>::with_props(..).render(). 


Create index.htm[A] 


Finally, add an index.html file in the root directory of your app. 


<!doctype html><html> <head> <meta charset="utf-8" /> <title>Yew App</title> </head> <body></body></htm1> 


View your web application] 

Run the following command to build and serve the application locally. 

trunk serve 

info 

Add option ’--open’ to open your default browser trunk serve -—open. 


Trunk will rebuild your application if you modify any of its source code files. By default server will 
listening at address ’127.0.0.1’ and port ’8080’ => |http://localhost:8080| To change it, create the following 
file and edit as needed: 


Trunk.toml 


[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


Congratulations] 


You have now successfully set up your Yew development environment, and built your first web 
application. 
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Experiment with this application and review the examples to further your learning. 
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Build a sample app 


Once you have the environment ready, you can either choose to use a starter template that contains the 
boilerplate needed for a basic Yew app or manually set up a small project. 


Using a starter templatdal 
Install[cargo—generatelby following their installation instructions then run the following commands: 


cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template 


Change directory into your newly created project, then: 


trunk serve 


Setting up the application manually] 
Create Project] 


To get started, create a new cargo project. 
cargo new yew-app 
Open the newly created directory. 


cd yew-app 


Run a hello world exampldal 


To verify the Rust environment is setup, run the initial project using cargo run. You should see a 
"Hello World!" message. 


cargo run# output: Hello World! 


Setting up the project as a Yew web application 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. 


Update Cargo.tomlA] 


Add yew to the list of dependencies editing file: 


[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies] yew = { version = "0.20.0", features = ["csr"] } 
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orusing cargo add yew -F csr. 
info 


You only need feature csr if you are building an application. It will enable the Renderer and all 
client-side rendering related code. 


If you are making a library, do not enable this feature as it will pull in client-side rendering logic into the 
server-side rendering bundle. 


If you need the Renderer for testing or examples, you should enable it in the dev-dependencies 
instead. 


Update main.rga] 


We need to generate a template which sets up a root Component called App which renders a button that 
updates its value when clicked. Replace the contents of src/main.rs with the following code. 


note 


The call to yew: :Renderer: :<App>::new().render () inside the main function starts your 
application and mounts it to the page’s <body> tag. If you would like to start your application with any 
dynamic properties, you can instead use 

yew: :Renderer::<App>::with_props(..).render(). 


Create index.htmlA] 


Finally, add an index.html file in the root directory of your app. 


<!doctype html><html> <head> <meta charset="utf-8" /> <title>Yew App</title> </head> <body></body></html> 


View your web application4l 

Run the following command to build and serve the application locally. 

trunk serve 

info 

Add option ’--open’ to open your default browser trunk serve -—open. 


Trunk will rebuild your application if you modify any of its source code files. This will fail if the socket is 
being used by another application. By default server will listening at address ’127.0.0.1’ and port ’8080’ 


=> |http://localhost:8080] To change it, create the following file and edit as needed: 


Trunk.toml 
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[serve]# The address to serve on LAN.address = "127.0.0.1"# The address to serve on WAN.# address = "0.0.0.0"# The port to serve on.port = 8000 


Congratulations] 


You have now successfully setup your Yew development environment, and built your first web 


application. 


Experiment with this application and review the examples to further your learning. 
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Version: 0.19.0 
On this page 


Build a sample app 
Create Project] 


To get started, create a new cargo project. 
cargo new yew-app 
Open the newly created directory. 


cd yew-app 


Run a hello world exampldal| 


To verify the Rust environment is setup, run the initial project using the cargo build tool. After output 
about the build process, you should see the expected "Hello World" message. 


cargo run 


Converting the project into a Yew web application 


To convert this simple command line application to a basic Yew web application, a few changes are 
needed. 


Update Cargo.tomla] 


Add yew to the list of dependencies. 


[package]name = "yew-app"version = "0.1.0"edition = "2018"[dependencies]# you can check the latest version here: https://crates.io/crates/yewyew = "0.19" 


Update main.rga] 


We need to generate a template which sets up a root Component called Model which renders a button that 
updates its value when clicked. Replace the contents of src/main.rs with the following code. 


note 
The line yew: : start_app: :<Model> () inside main () starts your application and mounts it to the 
page’s <body> tag. 


If you would like to start your application with any dynamic properties, you can instead use 
yew: :start_app_with_props::<Model>(..). 
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Create index.html] 


Finally, add an index.html file in the root directory of your app. 


<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Yew App</title> </head></html> 


View your web application{4 
Run the following command to build and serve the application locally. 
trunk serve 


Trunk will helpfully rebuild your application if you modify any of its files. 


Congratulations] 


You have now successfully setup your Yew development environment, and built your first web 
application. 


Experiment with this application and review the examples to further your learning. 
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Build a sample app 
First, create a new cargo project: 
cargo new yew-app 

Open the newly created directory. 


First, let’s add yew as a dependencies in the Cargo.toml file: 


[package]name = "yew-app"version = "0.1.0"edition = "2018"[dependencies]# you can check the latest version here: https://crates.io/crates/yewyew = "0.18" 


Copy the following template into your src/main.rs file: 


This template sets up your root Component, called Model which shows a button that updates itself 
when you click it. Take special note of yew: : start_app: :<Model>() inside main () which starts 
your app and mounts it to the page’s <body> tag. If you would like to start your application with any 
dynamic properties, you can instead use yew: :start_app_with_props::<Model>(..). 


Finally, add an index.html file in the root directory of your app: 


<!doctype html><html> <head> <meta charset="utf-8" /> <title>Yew App</title> </head></htm1l> 


Run your appf| 
If you haven’t already, install {Trunk} 


cargo install trunk wasm-bindgen-cli 


If you haven’t already installed it, you need to add the wasm32-unknown-unknown target. To install 
this with Rustup: 


rustup target add wasm32-unknown-unknown 


Now all you have to do is run the following: 


trunk serve 


This will start a development server which continually updates the app every time you change something. 


Troubleshooting] 


@ Trunk’s installation failed: 


Make sure you have the development packages of openssl installed. For example, libssl-dev on 
Ubuntu or openssl-devel on Fedora. 


198 


Previous 

Using cargo-web 

Next 

Choosing a web library 


° 
@ |Troubleshooting 


Support 
@ (Sponsor Project 


Participate 


199 


Skip to content 


Navigation Menu 


Toggle navigation 
Sign in 


@ Product 


Automate any workflow 


O 
ode review 
Manage code changes 
O 
ssues 
lan and track work 
O 
Discussions 
ollaborate outside of code 
Explore 


@ Solutions 
By size 


Oo 

oO |Startups 
By industry 
O |Healthcare 
O 
O 


200 


By use case 


O ICI/CD & Automation 
0 
O 


@ Resources 
Topics 


Explore 
Learning Pathways 


White papers, Ebooks, Webinars 


The ReadME Project 
GitHub community articles 


Repositories 


@ Enterprise 
O 


Al-powered developer platform 
Available add-ons 


Premium Support 
Enterprise-grade 24/7 support 


@ [Pricing] 


201 


Search or jump to... 


Search code, repositories, users, issues, pull requests... 


Search 


oe 


Clear 


Search syntax tips 


Provide feedback 


We read every piece of feedback, and take your input very seriously. 


L] Include my email address so I can be contacted 


Cancel Submit feedback 


Saved searches 


Use saved searches to filter your results more quickly 


Name 
Query 


To see all available qualifiers, see our 


Cancel Create saved search 

Sign in 

Sign up Reseting focus 

You signed in with another tab or window. [Reload]to refresh your session. You signed out in another tab 
or window. [Reload]to refresh your session. You switched accounts on another tab or window. [Reload]to 
refresh your session. Dismiss alert 

{{ message }} 


202 


[aigo-generate)/[eargo-generate] Public 


Notifications} You must be signed in to change notification settings 
Fork 158 


Star 1.9k 


cargo, make me a project 


Apache-2.0, MIT licenses found 


Licenses found 
Apache-2.0 


Notifications] You must be signed in to change notification settings 


ull requests 4 


EIS 
6 mon 
ro Oo 
& n 
n N 
oe N 
i=) 

n 


Actions 
rojects O 


eee @ eee @ 
las) 


=a) |) 
io) 
fo) 
c 
5 
a. 
et 


nsights 


Additional navigation options 


ull requests 
Discussions 
Actions 

rojects 


eee © O88 @ @ 
=| 1%) fax VWI ITO 
io) nO 
g Als 
fi: S| 
Co od 


nsights 


203 


cargo-generate/cargo-generate 


This commit does not belong to any branch on this repository, and may belong to a fork outside of the 
repository. 
.fpGZrB { font-weight:600;font-size:32px;margin:0; }/*!sc*/ 
.fpGZrB :where([data-variant=’ large’ ]) {font:var(--text-title-shorthand-large,600 32px / 1.5 
-apple-system, BlinkMacSystemFont,"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 
.fpGZrB:where([data-variant=’ medium’ }){font:var(--text-title-shorthand-medium,600 20px / 1.6 
-apple-system, BlinkMacSystemFont,"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 
.fpGZrB:where([data-variant=’ small’ ]){ font:var(--text-title-shorthand-small,600 16px / 1.5 
-apple-system, BlinkMacSystemFont,"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 
data- styled. Cee ee sc-lcldgg0-0"]{content:"fpGZrB," }/*!sc*/ 

x ;margin-bottom: 


ox:dlisplay:flex;-webkit-fl jent:space-between; }/*!sc* 
0-89) :169x: "ls 
m: | 6px:padding-top:8px: }/*!sc*/ 


we adding : 
ion:row;-ms-flex-direction:row;flex-direction:row;gap:8px; Ve lsc#/ 


aeela ae box! Edigplae -webkit- flex; ‘digo 
@media screen and 
(max-width:320px) { .hsfLlq {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow:1;} }/*!sc*/ 
.gpKoUz{position:relative; }/*!sc*/ @media screen and (max-width:380px){.gpKoUz 
.tef-selector-button-text-container { max-width:80px;} }/*!sc*/ @media screen and 

(max-width:320px) {.gpKoUz {-webkit-box-flex: 1;-webkit-flex-grow: | ;-ms-flex-positive: 1;flex-grow:1;}.gpKoUz 
.overview-ref-selector{ width: 100%; }.gpKoUz .overview-ref-selector > 


span { display:-webkit-box:display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.gpKoUz 
.overview-ref-selector > span > 

span[data-component="text"]{-webkit-box-flex: 1 ;-webkit-flex-grow: | ;-ms-flex-positive: 1;flex-grow:1;} }/*!sc*/ 
-kkrdEu{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center; }/*!sc*/ 
.bKgizp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; width: 100%; }/*!sc*/ 
APGYsi{margin-right:4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 

.cae Y Dk { font-size: 14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }/*!sc*/ 
.trpoQ { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none; }/*!sc*/ 
.laYubZ{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ @media 
screen and (max-width:1079px){.laYubZ{ display:none; } }/*!sc*/ 

.swnaL { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ @media 
screen and (min-width:1080px){.swnaL { display:none; } }/*!sc*/ @media screen and 
(max-width:543px){.swnaL{ display:none; } }/*!sc*/ 
.bWpuBf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px; }/*!sc*/ 
.grHjNb{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px; }/*!sc*/ 
@media screen and (max-width:543px) {.grHjNb{ display:none; } }/*!sc*/ 

.dXTsqj{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ @media 
screen and (max-width:1011px){.dXTsqj { display:none; } }/*!sc*/ 

.dCOrmu { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ @media 
screen and (min-width:1012px){.dCOrmu{ display:none; } }/*!sc*/ @ media screen and 
(max-width:544px){.bVvbgP{ display:none; } }/*!sc*/ 
.bNDvfp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ @media 
screen and (min-width:544px){.bNDvfp{display:none; } }/*!sc*/ 


204 


-yfPnm { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap: 1 6px; }/*!sc*/ 


.cAQuiW { width: 100%;border-collapse:separate; border-spacing:0;border: 1px 


solid;border-color:var(--borderColor-default, var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset; }/*!sc*/ 
AIUILN {height:0px;line-height:Opx; }/*!sc*/ iiUILN tr{height:0px;font-size:0px; }/*!sc*/ 

JjmggSN { padding: 1 6px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size: 12px;text-align:left;height:40px; }/*!sc*/ 
JjmggSN 

th{ padding-left: 16px;background-color:var(--bgColor-muted, var(--color-canvas-subtle,#f6f8fa)); }/*!sc*/ 
-kvYunM { width: 100%;border-top-left-radius:6px; }/*!sc*/ @media screen and 
(min-width:544px){.kvYunM { display:none; } }/*!sc*/ 

-hrLuxA { width:40%;border-top-left-radius:6px; }/*!sc*/ @media screen and 
(max-width:543px){.hrLuxA { display:none; } }/*!sc*/ 

.cuEKae{ text-align:right;padding-right: 1 6px;width: 136px;border-top-right-radius:6px; }/*!sc*/ 

JEDBOT {color:var(--fgColor-muted, var(--color-fg-muted,#656d76));font-size:12px;height:40px; }/*!sc"/._ 
@media screen and 

(min-width:544px) { .brJRqk { -webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap; } }/*!sc*/ 
.epsqEd { text-align:center;vertical-align:center;height:40px;border-top: 1 px 
solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de)); }/*!sc*/ 


.ldpruc{border-top: 1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer; }/*!sc*/ 
.ehcSsh{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex: | ;-webkit-flex-grow: | ;-ms-flex-positive: | ;flex-grow: 1;gap: 16px; }/*!sc*/ 


iGmlUb{borde 


solid;border-color:var(--bordeiColor-default.var 


@media screen and 

(max-width:543px) {.iGmlUb{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 

32px); }}/*!sc*/ @media screen and (min-width:544px){.iGmlUb{ max-width: 100%; } }/*!sc*/ 
ARQGXA { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom: 1px _ 


se AdouTde) default iyz-inde: border op eft-a ‘px)i*'set7 
-gwulGu { display:-webkit-box:display:-webkit-flex:display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms- “fex-direction: column; flex-direction: column: webkit-alignitems:centers-webkit-box align:center:-ms-flex-align: centeralipn! itemstcenter, We lse*/ 


.bJMeLZ{ padding: 32px3 overflow:auto; }/*!sc*/ 


1 cV2e hsiLggpKoUz kkrdEu bK itp iPGYsi,casYBkrpoQJaYubZ.swnalbWpuBt grHjNb.dXTsqj.dCOrmu,bVvbgP NDvip.y{Pam,cAQuiW.siUILN,jmggSN kv YunMhrLuxA cuEKae JEbBOT-brlRgk epsqE.dipruc che Ssh iGmIUbiRQGXA.ewulGu,bIMeLZ,")/Is0*/ 


webkit-box-flex: I;-webkit-flex-grow:1;-ms-flex-positive:I;flex-grow:1;}/!sc*/ 


.JwBfae{border-radius:6px;border:lpx. . 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- n-width:t max-content; :-webkit-t transition: n:80ms 
cubic-bezi 


je-bezien(0.65,0.0.35,1);-webkit- 


xt #242921): backgn 


1px 0 rgba(31,35,40,0.04))), var(--button-default- shadow: inset Gant color ne inset- shadow inset £0 1px 0 
rgba(255,255,255,0.25)));}/*!sc*/ jwBfae:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.jwBfae:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent; }/*!sc*/ 
.jjwBfae:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.jwBfae[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.jwBfae[href]:hover {-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.jwBfae:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 
jwBfae:active{-webkit-transition:none;transition:none; }/*!sc*/ 

.|wBfae|data-inactive] { cursor:auto; }/*!sc*/ 


ddefaut-borderColor-disabled,var(~-button-defaull-horderColor: 


1-bin-border,sgba(31.35,40,0.15)))cbackground.color:var--button-defaul-bgColor-disabled,var(--control-bgColor-isabled, var(--color-input-disabled-bg.rgba(175,184,193,0.2)));}/*!8e%? 


.jwBfae:disabled idatascoriponsit=ButtonGounter| { color:inherit;}/*!sc*/ @media 


(forced-colors:active){.jwBfae:focus{outline:solid 1px transparent; } }/*!sc*/ jwBfae 
[data~-component=ButtonCounter] { font-size: 1 2px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08))); }/*!sc*/ 


jwBfae[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width: unset; }/*!sc*/ 
.jwBfae[data-size="small"]{padding:0 8px;height:28px;gap:4px; font-size: 12px; }/*!sc*/ 
.jjwBfae[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.jwBfae[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 


205 


.jwBfae[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.jwBfae[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.jwBfae[data-size="large"]{padding:0 16px;height:40px;gap:8px; }/*!sc*/ .jwBfae[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.jwBfae[data-size="large" |[data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
jwBfae[data-block="block"]{ width: 100%; }/*!sc*/ 


.jwBfae[data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width :fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.jjwBfae[data-label-wrap="true"] [data-component="buttonContent"] {-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .jwBfae[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
.JwBfae[data-label-wrap="true"][data-size="small"] { height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
.jwBfae[data-label-wrap="true" ][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


jwBfae[data-label-wrap="true"][data-size="large" ] { hei ght:unset;min-hei ght: var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, Irem); }/*!sc*/ 
.jwBfae[data-label-wrap="true"|[data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
71D S15 (D8 Se AUER ETA RE ORL ETC Re OPO T OCT CE TT em eT ae a ee 
jwBfae[data- inactive] =] :not( [disabled] ): foes: visible box shadow. none; e:)/*Isc*/ Gqbine: 
[data-component="leading Visual" ] { grid-area:leading Visual; }/*!sc*/ .jwBfae 

[data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ .jwBfae 
[data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ jwBfae 
[data-component="trailingAction"] {margin-right:-4px; }/*!sc*/ .jwBfae 

[data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.jwBfae [data-component="buttonContent"] > :not(:last-child) { margin-right:8px; }/*!sc*/ .jwBfae 
[data-component="loadingSpinner"] { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 
jwBfae [data- gag Uti nding rege ed ona ] + [data- -component=' ‘text"]{visibility:hidden; aes 


vBfae:hover:not({disabled)) now data nactive}) { Dackground-color:var(--button-default-b; btn-hover-bg,#£3£4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderC ae over. var(~-color-bin-hover-border: rgba(31,35,40,0.15))));}/*1se*/ 
e:not({disabled]):not({data-i ) (background-ct -button-default-bgC 14% an f ar( 
.jWBfae[aria-expanded=true_ (background color:var(--button-default-bgColor-active,var(-~ 


.jwBfae [data-component="leading Visual" ],.jwBfae [data-component="trailing Visual" ],.jwBfae 
[data-component="trailing Action" ] { color:var(--button-color, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.JwBfae[data-component="IconButton" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.jwBfae{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0; }/*!sc*/ 
jwBfae svg {color:var(--fgColor-muted,var(--color-fg-muted,#656d76)); }/*!sc*/ jwBfae > 

span{ width:inherit; }/*!sc*/ .eybzoG{border-radius:6px;border:lpx . 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content; sayeblaet transition: n:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cabic-brien0 650.3, 1-webhiransition peopcrycolon il ackdrcund- color border-color tanston-popert:colr fil background-color horde-colorcoorvarbuton-default-f¢Colorsesvar-cooe-text #242921 sackground-eoorstansparenbox-shadwnone:/# se" 
.eybzoG:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.eybzoG:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.eybzoG:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.eybzoG[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 


~ bin-active-border,rgba(31,35,40,0.15)))):}/*1sc*/ 
--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15)))); ee Isc*/ 


-color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active, 
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.eybzoG[href] :hover {-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.eybzoG:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.eybzoG:active { -webkit-transition:none;transition:none; }/*!sc*/ 

.eybzoG[data-inactive] {cursor:auto; }/*!sc*/ 

.eybzoG: disabled {cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.eybzoG: disabled [data-component=ButtonCounter],.eybzoG:disabled 
[data-component="leading Visual" ],.eybzoG:disabled 

[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.eybzoG:focus{outline:solid 1px transparent; } }/*!sc*/ .eybzoG 
[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 

.eybzoG[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.eybzoG[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 1 2px; }/*!sc*/ 
.eybzoG[data-size="small"] [data-component="text"] {line-height:calc(20 / 12);}/*!sc*/ 
.eybzoG[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.eybzoG[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.eybzoG[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.eybzoG[data-size="large"] { padding:0 16px;height:40px;gap:8px; }/*!sc*/ .eybzoG[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.eybzoG[data-size="large"][data-component=IconButton] { width:40px;padding: unset; }/*!sc*/ 
.eybzoG[data-block="block"] { width: 100%; }/*!sc*/ 


.eybzoG[data-label-wrap="true" ] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.eybzoG[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .eybzoG[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
.eybzoG[data-label-wrap="true"][data-size="small"] { height:unset;min-height:var(--control-small-size, | .75rem); }/*!sc*/ 
.eybzoG[data-label-wrap="true" ][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.eybzoG[data-label-wrap="true" |[data-size="large"] { height:unset;min-height: var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, rem); }/*!sc*/ 
.eybzoG[data-label-wrap="true" |[data-size="large"] 
[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
Kl oak 
FN saa at a tg rar lactated acct ialGnat aay 


.eybzoG[data- inactive] "| ;not([disabled] ): fone visiblet box: ehadow: none; e:}/*Isc¥/ ‘eybroG 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.eybzoG [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.eybzoG [data-component="trailing Visual" ] { grid-area:trailing Visual; }/*!sc*/ .eybzoG 
[data-component="trailing Action" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.eybzoG [data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual" ;grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.eybzoG [data-component="buttonContent"] > :not(:last-child){margin-right:8px; }/*!sc*/ .eybzoG 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc*/ 


.eybzoG [data-component="loadingSpinner"] + [data-component="text"] { visibility:hidden; }/*!sc*/ 
.eybzoG:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ 
.eybzoG:active:not([disabled]) { background-color:var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
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.eybzoG[aria-expanded=true] { background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 
.eybzoG[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.eybzoG[data-no-visuals] { color: var(--fgColor-accent, var(--color-accent-fg,#0969da)); }/*!sc*/ 
.eybzoG:has([data-component="ButtonCounter"]){ color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
.eybzoG:disabled[data-no-visuals] { color: var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.eybzoG:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 

.eybzoG { color: var(--fgColor-muted, var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px; }/*!sc*/ 
.eybzoG span[data-component="leadingVisual"]{margin-right:4px !important; }/*!sc*/ 
:kPKwzC{border-radius:6px;border:lpx. . . 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- is yeidthich max-content; caveblitt transition: n:80ms 


cubic-bezier(0. 65,0. 0, 0. 35, 2); ;transition:80ms 


(0.650.003. swebhi <ton-propertycolr fil background-color horde-colorcoorvart~blton-defal-f¢Colorses.var~coloen-txt #242920 fackground-eolorstansparentbox-shadonone se 
kPKwzC:focus:not(:disabled) {box-shadow:none ‘outline px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
-kPKwzC:focus:not(:disabled):not(:focus-visible){ outline:solid 1px transparent; }/*!sc*/ 
-kPKwzC:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

-kPKwzC[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
-kPKwzC[href]:hover {-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
-kPKwzC:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

-.kKPKwzC:active {-webkit-transition:none;transition:none; }/*!sc*/ 


.kPKwzC[data-inactive] {cursor:auto; }/*!sc*/ 
-kPKwzC:disabled { cursor:not-allowed;box-shadow:none;color: var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


-kPKwzC:disabled [data-component=ButtonCounter],.kPKwzC:disabled 
[data-component="leading Visual" ],.kKPKwzC:disabled 
[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.kPKwzC:focus{outline:solid 1px transparent; } }/*!sc*/ .kKPKwzC 


[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
-kPKwzC[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 


-kKPKwzC[data-size="small"]{ padding:0 8px;height:28px;gap:4px; font-size: 12px; }/*!sc*/ 
-kPKwzC[data-size="small"] [data-component="text"] { line-height:calc(20 / 12);}/*!sc*/ 
-kPKwzC[data-size="small"] [data-component=ButtonCounter] { font-size: 12px;}/*!sc*/ 
-kPKwzC[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

-kPKwzC[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
-kPKwzC[data-size="large"]{padding:0 16px;height:40px;gap:8px; }/*!sc*/ .kPKwzC[data-size="large" ] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
-kKPKwzC[data-size="large"][data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.kPKwzC[data-block="block"]{ width: 100%; }/*!sc*/ 


-kPKwzC[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
-kPKwzC[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .KPKwzC[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
-kPKwzC[data-label-wrap="true"][data-size="small"] {height:unset;min-height:var(--control-small-size, |.75rem); }/*!sc*/ 
-kPKwzC[data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 
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kPKwzC[data-label-wrap="true"][data-size="large" ] { height:unset:min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem);}/*!sc*/ 
-kPKwzC[data-label-wrap="true" |[data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px); }/*!sc*/ 


2C|datiinactive]:not{[disabled))(background-color:var(--button-inactive-bgColor.var(--butt e-bgColor -color-bin-inactive-bg, feavef2))):border-color:var(—-button-inactive-bgColor.var(—-u .e-bgColor-test,var(--color-btn-inactive-bg #teaee2))):color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest.var(--color-bin-inactive-text#57606a))); "1807 


-.kPKwzC[data- inactive: riot({disabledi): focus- visiblet box sHadour none; Wi Isc%/ ‘kPKwzC~ 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


-kPKwzC [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
-kPKwzC [data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .kKPKwzC 
[data-component="trailingAction" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
-kPKwzC [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual" ;grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
-kPKwzC [data-component="buttonContent"] > :not(:last-child) { margin-right:8px; }/*!sc*/ .kKPKwzC 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc*/ 


-kPKwzC [data-component="loadingSpinner"] + [data-component="text"] { visibility:hidden; }/*!sc*/ 

-kPKwzC:hover:not([disabled]) { background-color:var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 
-kPKwzC:active:not([disabled]){ background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
-kPKwzC[aria-expanded=true] { background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


-kPKwzC[data-component="IconButton"][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
-kPKwzC[data-no-visuals] { color:var(--fgColor-muted,var(--color-fg-muted,#656d76)); }/*!sc*/ 
-kPKwzC:has([data-component="ButtonCounter"]) { color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)); }/*!sc*/ 
-kPKwzC:disabled[data-no-visuals] { color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
-kPKwzC:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 

-feqCqy {border-radius:6px;border:lpx.. 7 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- oqidine max-content; s-webkit-t transition: n:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


1(0.65,0,0.35.1)-8 .color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:vart--button-default-bgColor-rest,var(--color-bin-bg, #618fa)):box-shadow:var(--button-default-shadow-resting,var(~-color-bin-shadow.0 


1px 0 s260(31,35 40,0.04))) var Bitton defaull-shadow-inaéivar® color bin-inset shadowineét 0 Ipx 0 
rgba(255,255,255,0.25)));}/*!sc*/ feqCqy:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.feqCqy:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.feqCqy:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.feqCqy [href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.feqCqy[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.feqCqy:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.feqCqy:active {-webkit-transition:none;transition:none; }/*!sc*/ 

.feqCqy[data-i inactive] lt cursor:auto; PE Isc*/ 


feqCqyi jull-borderColor disabled, var(--button-defaull-borderColor-res.vat(-color-bin-border.rgba(3 35 40,0.15)))sbackground-color:vae(~-butlon-defaull-bgColor-disabled,var--control-bgColor-disabled,var(~-colorinput-disabled-bg.rgba(175,184,193,0.2))):bPIse! 


.feqCqy:disabled [dais component ButonCounterlicolon merit) "tee" @media 
(forced-colors:active){ .feqCqy:focus {outline:solid 1px transparent; } }/*!sc*/ .feqCqy 


[data~-component=ButtonCounter] { font-size: 1 2px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08))); }/*!sc*/ 
.feqCqy[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.feqCqy[data-size="small"] { padding:0 8px;height:28px;gap:4px;font-size:12px; }/*!sc*/ 
.feqCqy[data-size="small"] [data-component="text"]{line-height:calc(20 / 12); }/*!sc*/ 
.feqCqy[data-size="small"] [data-component=ButtonCounter] { font-size:12px; }/*!sc*/ 
.feqCqy[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.feqCqy[data-size="small"][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.feqCqy[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .feqCqy[data-size="large" | 
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[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.feqCqy[data-size="large" |[data-component=IconButton] { width:40px;padding: unset; }/*!sc*/ 
.feqCqy[data-block="block"]{ width: 100%; }/*!sc*/ 


.feqCqy[data-label-wrap="true" ] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.feqCqy[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .feqCqy[data-label-wrap="true" | 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.feqCqy[data-label-wrap="true" ][data-size="small"] { height:unset;min-height: var(--control-small-size, 1.75rem); }/*!sc*/ 
.feqCqy[data-label-wrap="true" ][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


feqCqy[data-label-wrap=" true" |[data-size="large" ] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline: var(--control-large-paddingInline-spacious, Irem);}/*!sc*/ 
.feqCqy[data-label-wrap=" true" |[data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px); }/*!sc*/ 


feqCqy[data- Hace: not{(disabled|): (eeu: weiblet bok Ahadow: none; es V/*Isc*/ yoacays: 
[data-component="leading Visual" ] { grid-area:leading Visual; }/*!sc*/ .feqCqy 
[data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ .feqCqy 
[data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ feqCqy 
[data-component="trailingAction"] {margin-right:-4px; }/*!sc*/ .feqCqy 
[data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 

.feqCqy [data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ .feqCqy 

Fre ci PesnaeRiP NLS a ae { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 

pic NA ga OO eee) ! ee Opens te (asiilty Indden: FO anaes sy 
bi 


‘feqCgy:active:not({disabled}):not on-default- 
feqCqylaria- expanded’ ie] (background. er va ae aan default-bgColor-activ. 


.feqCqy [data-component="leading Visual" ],.feqCqy [data-component="trailing Visual", .feqCqy 
[data-component="trailingAction"] { color:var(--button-color, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
feqCqy[data-component="IconButton")[data-no- visuals] { color: var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


(220, n~ order.rgba(31, 35.40.01); ctl 
tive-bg,hsla(22 20, ae 93%,1))):border-color:var(- ‘eation a oie active,var(--button-default-borderColor-active,var(--color-btn-active 2 iden rgba(31,35,40,0.15))));}/*!se*/ 


(--color-bt 


12px;gap:8px;min- width: -webkit- max-content;min- width:-moz-max-content;min-width:max-content;-webkit-transition:80ms 


cubic- -bezier(0. 65, 0, 0.35,1); transition: :8Oms 


1px 0 rgba(31,35,40,0.1)));}/*!sc*/ .dLirOd: aan not: disabled) (box: Ahadawe none; a-uline: pe eela 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.dLirOd:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.dLirOd:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.dLirOd[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.dLirOd[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.dLirOd:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.dLirOd: active -webkit- transition:none;transition:none; }/*!sc*/ 

.dLir 


dLirOd:disabled| 


.dLirOd:disabled [data- coinponent=ButosConnter color inherit; Vi lsc/ @media 
(forced-colors:active){.dLirOd:focus{outline:solid 1px transparent; } }/*!sc*/ .dLirOd 


gba(31,35,40,0.15))):)/*!se" 
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[data-component=ButtonCounter] { font-size: 1 2px;background-color:var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg,rgba(0,45,17,0.2)));color:var(--button-primary-fgColor-rest, var(--color-btn-primary-text ##ffffff)); }/*!sc*/ 
.dLirOd[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width: unset; }/*!sc*/ 
.dLirOd[data-size="small"] { padding:0 8px;height:28px;gap:4px;font-size:12px; }/*!sc*/ 
.dLirOd[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.dLirOd[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.dLirOd[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.dLirOd[data-size="small"][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.dLirOd[data-size="large"]{padding:0 16px;height:40px;gap:8px; }/*!sc*/ .dLirOd[data-size="large" ] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.dLirOd[data-size="large" |[data-component=IconButton] { width:40px;padding: unset; }/*!sc*/ 
.dLirOd[data-block="block"] { width: 100%; }/*!sc*/ 


.dLirOd[data-label-wrap=" true" ] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.dLirOd[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .dLirOd[data-label-wrap="true" | 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.dLirOd[data-label-wrap="true" ][data-size="small"] { height:unset;min-height: var(--control-small-size, 1.75rem); }/*!sc*/ 
.dLirOd[data-label-wrap="true"][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.dLirOd[data-label-wrap="true"][data-size="Iarge" ] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, Irem); }/*!sc*/ 
.dLirOd[data-label-wrap="true" ][data-size="large"] 
[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
ES as nasa ancl ena Gale Dial aed adie palsida clas uaeominehs 
.dLirOd[data- inactive): not([disabled)): focus visible(box: siege none; e:}/*lsc*/ ‘dLirOd 
[data-component="leading Visual" ] { grid-area:leading Visual; }/*!sc*/ .dLirOd 
[data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ .dLirOd 
[data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .dLirOd 
[data-component="trailingAction"] {margin-right:-4px; }/*!sc*/ .dLirOd 
[data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 
trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.dLirOd [data-component="buttonContent"] > :not(:last-child) {margin-right:8px;}/*!sc*/ .dLirOd 
[data-component="loadingSpinner"] { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 
.dLirOd [data-component="loadingSpinner"] + [data-component="text"]{ visibility:hidden; }/*!sc*/ 


.dLirOd:hover:not([disabled]):not([data-inactive]) { color:btn.primary .hoverText;background-color:var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg,#1a7£37)); }/*!sc*/ 
.dLirOd:focus:not([disabled]){box-shadow: inset 0 0 0 3px;}/*!sc*/ 
.dLirOd:focus-visible:not({disabled]) {box-shadow:inset 0 0 0 3px; }/*!sc*/ 


.dLirOd:active:not([disabled]):not({data-inactive]) { background-color: var(--button-primary- AEA argos leer ehcp pep Doe Nas nO TE PPE LN 


0 Ipx 0 rgba(0,45,17,0.2)));}/*1sc*/ 


ria-expanded=true] { backevound: calor var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg,hsla(137,66%,28%, 1)));box-shadow:var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, inset 
0 1px 0 rgba(0,45,17,0.2))); }/*!sc*/ .dLirOd svg {color:fg.primary; }/*!sc*/ 
.emYRmJ{border-radius:6px;border:lpx. Eee ee 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- idee max-content; cawebeiet transition: n:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cubic-bezier(0.65,0,0.35, 1);-webkit-transition-property:color, ill, background-color, border-color:transition-property:color fill,background-color, border-color;color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)):background-color:transparent;box-shadow:none; }/*!sc*/ 


-fColor var(--button-inactive-fgColor-restvar(--color-bin-inactive-text #57606a))):)/"!sc*/ 


.emYRmJ:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 


211 


.emYRmJ:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.emYRmJ:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.emYRmjJ[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.emYRmJ[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.emYRmJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.emYRmJ:active {-webkit-transition:none;transition:none; }/*!sc*/ 


.emYRmJ[data-inactive] {cursor:auto; }/*!sc*/ 
.emYRmJ:disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


.emYRmJ:disabled [data-component=ButtonCounter],.em YRmJ:disabled 
[data-component="leading Visual" ],.emYRmJ:disabled 
[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.emYRmjJ:focus{outline:solid 1px transparent; }}/*!sc*/ .emYRmJ 


[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.emYRm/J[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 


.emYRmJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px; }/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.em YRmJ[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.emYRmJ[data-size="large"]{padding:0 16px;height:40px; gap: 8px; }/*!sc*/ .emYRm/J[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.emYRmJ[data-size="large" |[data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.emYRm/J[data-block="block"]{ width: 100%; }/*!sc*/ 


.emYRmJ[data-label-wrap="true" | { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.emYRmjJ[data-label-wrap="true"] [data-component="buttonContent" ]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .emY RmJ[data-label-wrap="true" ] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.emY RmJ[data-label-wrap="true" |[data-size="small"] {height:unset;min-height:var(--control-small-size, |.75rem); }/*!sc*/ 
.emYRm/J[data-label-wrap="true"][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.emYRmjJ[data-label-wrap="true" ][data-size="large" ] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, | rem); }/*!sc*/ 
.emYRmjJ[data-label-wrap="true"][data-size="large"] 
Ldata: Msi { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 

i's c* 


emYRGI rae facta) -not((disabledl). foes: igbleltor: shales none; eV Isc*/ ‘env, 
[data-component="leading Visual" { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.emYRmjJ [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.emYRmjJ [data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .emYRmJ 
[data-component="trailingAction"]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.emYRmJ [data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display: grid; grid-template-areas:"leadingVisual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 


.emYRmjJ [data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ .emYRmJ 
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[data-component="loadingSpinner"] { grid-area:text;margin-right:O0px !important;place-self:center; }/*!sc*/ 


.emYRmjJ [data-component="loadingSpinner"] + [data-component="text"]{ visibility:hidden; }/*!sc*/ 

.emYRmJ:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 
.emYRmJ:active:not([disabled]) { background-color:var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
.emYRmJ[aria-expanded=true] { background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); }/*!sc*/ 


.emYRmJ[data-component="IconButton" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.emYRmjJ([data-no-visuals] { color:var(--fgColor-accent,var(--color-accent-fg,#0969da)); }/*!sc*/ 
.emYRmjJ:has([data-component="ButtonCounter"]) {color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
.emY RmJ:disabled[data-no-visuals] { color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.emYRmJ:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 

ANcPMC {border-radius:6px;border Ux cocaine 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms 
cubic-bezier(0.65,0,0.35,1);transition:80ms 


cxbic-brien0 6511035, 1-webkivnsiion-peoperycoon il uckecund- color border-color ranston-popertcolr fil backeround.colorhorde-colrcoorvarbuton-defalt-f¢Colorses.var-coloen-txt #242921 sackground-eolorstansparenbox-shadonone/# se 
ANcPMC:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
cPMC:focus:not(:disabled):not(:focus-visible) {outline:solid 1px transparent; }/*!sc*/ 
cPMC:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
r(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

cPMC[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
cPMC[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
cPMC:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 
cPMC:active{-webkit-transition:none;transition:none; }/*!sc*/ 


cPMC[data-inactive] { cursor:auto; }/*!sc*/ 
.INcPMC: disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


ANcPMC:disabled [data-component=ButtonCounter],.1.NcPMC:disabled 
[data-component="leading Visual" ],.iNcPMC:disabled 
[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.iNcPMC:focus{outline:solid 1px transparent; } }/*!sc*/ iNcPMC 


[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.INcPMC[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 


.ANCPMC [data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 1 2px; }/*!sc*/ 
ANcPMC[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
ANcPMC[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
ANcPMC[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.ANCPMC [data-size="small" ][data-component=IconButton] { width:28px;padding: unset; }/*!sc*/ 
.ANcPMC [data-size="large"]{ padding:0 16px;height:40px; gap: 8px; }/*!sc*/ iNcPMC[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 

.ANCPMC [data-size="large" ][data-component=IconButton] { width:40px;padding: unset; }/*!sc*/ 
ANcPMC[data-block="block"] { width: 100%; }/*!sc*/ 


-INcPMC[data-label-wrap="true" ] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
ANcPMC[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ iANcPMC|data-label-wrap="true" ] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
-INcPMC[data-label-wrap="true" ][data-size="small"] { height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
ANcPMC[data-label-wrap="true" ][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
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2px); }/*!sc*/ 
.iNcPMC[data-label-wrap="true" ][data-size="large" | { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem); }/*!sc*/ 


ANcPMC[data-label-wrap="true" |[data-size="large"] 


[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px); }/*!sc*/ 


ACI dat ot([disabled]) (background-color: var(--buton-inactive-bgColor ton-inactive-bgColor-res,var(--color-bin .e-bg #eaee2))border-color-var(--button-inactive-bgColor,var(-button-inactive-bgColor-rest,var(~-color-bun-inactive-bg, #eaeef2)):color:var--buttoninactive-fgColor, var(~-button-inaetive-fColor-restvar--color-btn-inactive-text,#57606a))):)/*!Se*7 


ANcPMC[data- snaceyel: not([disabled)): foes: visible (box. shadow: none; VP lsc#/ iNcPMC- 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.INCPMC [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.INCPMC [data-component="trailing Visual" ] { grid-area:trailing Visual; }/*!sc*/ iNcPMC 
[data-component=" trailing Action" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
ANcPMC [data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 
trailing Visual"; grid-template-columns:min-content minmax(0,auto) 
min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.INCPMC [data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ iNcPMC 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc*/ 
.INCPMC [data-component="loadingSpinner"] + [data-component="text"] { visibility:hidden; }/*!sc*/ 
-INcPMC:hover:not([disabled]) { background-color:var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 


-INcPMC:active:not([disabled]) { background-color: var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
-INcPMC[aria-expanded=true] { background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


ANcPMC[data-component="IconButton" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
ANcPMC[data-no-visuals] { color:var(--fgColor-accent, var(--color-accent-fg,#0969da)); }/*!sc*/ 

ANcPMC :has([data-component="ButtonCounter"]) { color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)); }/*!sc*/ 
-INCPMC:disabled[data-no-visuals] { color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
ANcPMC:disabled[data-no-visuals] [data-component=ButtonCounter] {color:inherit; }/*!sc*/ 

-INCPMC { color: var(--fgColor-muted, var(--color-fg-subtle,#6e778 1 ));padding-left:8px;padding-right:8 px; }/*!sc*/ 


data-styled.g5[id="types__StyledButton-sc-ws60qy-0"]{ content:"jwBfae,eybzoG,kPKwzC,feqCqy,dLirOd,em YRmJ,iNcPMC," }/*!sc*/ 
TZSs{ position:absolute; width: | px;height: | px;padding:0;margin:- 1 px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }/*!sc*/ 


data-styled.g8[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"] {content:"rTZSs," }/*!sc*/ 

.dheQRw { color: var(--fgColor-accent,var(--color-accent-fg,#0969da));-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
[data-a11y-link-underlines=’ true’ ] 

-Link__StyledLink-sc-14289xe-0[data-inline=’ true’ ] {-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 
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cargo, make me a project 


cargo-generate is a developer tool to help you get up and running quickly with a new Rust project by 
leveraging a pre-existing git repository as a template. 


Here’s an example of using cargo-generate with|this template 
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Documentation 


See the cargo-generate [guide] for complete documentation. 


Templates 
One place to find templates is to look for the [cargo-generate topic|on GitHub. 


Quickstart 


Installation 


cargo install cargo-generate 


or if you havejno time, use cargo-binstall 


cargo binstall cargo-generate 


Usage 


# templates on github 
cargo generate --git https://github.com/username-on-github/mytemplate.git 


# or just 
cargo generate username-on-github/mytemplate 


# templates on other git platforms 

cargo generate gl:username-on-gitlab/mytemplate # translates to https://gitlab.com/username-on-gitlab/mytemplate.git 

cargo generate bb:username-on-bitbucket/mytemplate # translates to https://bitbucket.org/username-on-bitbucket/mytemplate.git 

cargo generate sr:username-on-sourcehut/mytemplate # translates to https://git.sr.ht/~username-on-sourcehut/mytemplate (note the tilde) 


# this scheme is also available for github 
cargo generate gh:username-on-github/mytemplate # translates to https://github.com/username-on-github/mytemplate.git 


# for a complete list of arguments and options 
cargo help generate 
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License 


Licensed under either of 


@ Apache License, Version 2.0, (LICENSE-APACHE)or|apache.org/licenses/LICENSE-2.0} 
@ MIT license (LICENSE-MIT}]orlopensource.org/licenses/MIT) 


at your option. 


Contributions 


Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by 
you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or 


conditions. If you want to contribute to cargo-generate, please read our(CONTRIBUTING notes 


cargo-generate would not be what it is today without the wonderful contributions from the community. 
Thank you! 


[IMAGE] 


About 


cargo, make me a project 


template-project] placeholders} template-generator 


Resources 


License 
Apache-2.0, MIT licenses found 


Licenses found 


Apache-2.0) 


LICENSE-APACHE 
MIT] 
LICENSE-MIT 
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Do not share my personal information 


You canat perform that action at this time. 
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@ |Getting Started 
@ Examples 


Version: 0.21 


Examples 
The Yew repository contains many|examples|(in various states of maintenance). We recommend perusing 


them to get a feel for how to use different features of the framework. We also welcome Pull Requests and 
issues for when they inevitably get neglected and need some a¥i, 
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For more details including a list of examples, refer to the]README 


note 


Most of the examples have a live deployment that can be found at}https://examples.yew.rs/ 


example_name >. Click the shield on their README page in their respective sub-folder to navigate to the 


live demo. 


Edit this page 


Build a sample app 
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@ (Yew Awesome 


228 


Skip to main content 
Yew Logo Yew Logo 


ee 
c@alra, -z 
ive 
clé«i,-2 


utorial 
(Community logPlay ground PiGitHub| 


Search 
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Concepts 
Advanced topics 
More 

Migration guides 


This is unreleased documentation for Yew Next version. 


For up-to-date documentation, see the (0.21). 
e 


@ |Getting Started 


@ Examples 


Version: Next 
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Examples 


The Yew repository contains many|examples|(in various states of maintenance). We recommend perusing 
them to get a feel for how to use different features of the framework. We also welcome Pull Requests and 
issues for when they inevitably get neglected and need some a¥i, 


For more details including a list of examples, refer to the]README 


note 


Most of the examples have a live deployment that can be found at}https://examples.yew.rs/ 


example_name >. Click the shield on their README page in their respective sub-folder to navigate to the 


live demo. 
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Migration guides 


This is documentation for Yew 0.20, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 
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@ Examples 


Version: 0.20 
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Examples 


The Yew repository contains many|examples|(in various states of maintenance). We recommend perusing 
them to get a feel for how to use different features of the framework. We also welcome Pull Requests and 
issues for when they inevitably get neglected and need some a¥i, 


For more details including a list of examples, refer to the]README 


note 


Most of the examples have a live deployment that can be found at}https://examples.yew.rs/ 


example_name >. Click the shield on their individual README page in their respective sub-folder to 
navigate to the live demo. 
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Migration guides 


This is documentation for Yew 0.19.0, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 


e 
®@ Getting Started 
@ Examples 
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Version: 0.19.0 


Examples 


The Yew repository is chock-full of (in various states of maintenance). We recommend perusing 
them to get a feel for how to use different features of the framework. We also welcome Pull Requests and 
issues for when they inevitably get neglected and need some a¥i, 


For more details including a list of examples, refer to the]README 
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This is documentation for Yew 0.18.0, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 
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Examples 


The Yew repository is chock-full of (in various states of maintenance). We recommend perusing 
them to get a feel for how to use different features of the framework. We also welcome Pull Requests and 
issues for when they inevitably get neglected and need some a¥i, 


For more details including a list of examples, refer to the]README 
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Search or jump to... 


Search code, repositories, users, issues, pull requests... 


Search 
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Clear 


Search syntax tips 


Provide feedback 


We read every piece of feedback, and take your input very seriously. 
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Cancel Submit feedback 


Saved searches 


Use saved searches to filter your results more quickly 
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Query 


To see all available qualifiers, see our 


Cancel Create saved search 

Sign in 

Sign up Reseting focus 

You signed in with another tab or window. [Reload]to refresh your session. You signed out in another tab 
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-apple-system, BlinkMacSystemFont,'"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 

-hOcRwN {font-weight:600;font-size:32px;margin:0;font-size: 14px;-webkit-box-flex: 1 ;-webkit-flex-grow: | ;-ms-flex-positive: | ;flex-grow: 1; }/*!sc*/ 
-hOcRWN:where([data-variant=’ large’ ]) { font: var(--text-title-shorthand-large,600 32px / 1.5 

-apple-system, BlinkMacSystemFont,'"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 

-hOcRWN:where([data-variant=’ medium’ }) {font:var(--text-title-shorthand-medium,600 20px / 1.6 
-apple-system, BlinkMacSystemFont,"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 

-hOcRWN:where([data-variant=’ small’ ]){font:var(--text-title-shorthand-small,600 16px / 1.5 
-apple-system, BlinkMacSystemFont,"Segoe UI","Noto Sans" ,Helvetica,Arial,sans-serif," Apple Color 
Emoji","Segoe UI Emoji");}/*!sc*/ 

data-styled.g1[id="Heading _StyledHeading-sc-1c1dgg0-0"]{content:";UaXMC,fpGZrB,eqidD1,eDVSKn,hOcRwN," }/*!sc*/ 
.£SW Wem { padding:0; }/*!sc*/ 


_kPPmzM { max-width:100%:margin-left:auto:margin-right:auto;display:-webkit-box:display:-webkit-flex:display:-ms-flexbox:display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap:flex-wrap:wrap;}/*!sc*/ 
.cCIAPDV {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 
100%;-ms-flex:1 1 100%;flex:1 1 
100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width: 100%; }/*!sc*/ 
.gvCnwW { width: 100%; }/*!sc*/ @media screen and (min-width:544px){.gvCnwW { width:100%; } }/*!sc*/ 
@media screen and (min-width:768px){.gvCnwW { width:auto; } }/*!sc*/ 


.irYKVt{ display:none;-webkit-order: | ;-ms-flex-order: | ;order: 1 ;width: 100%;margin-left:0;margin-right:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:0;min-width:0; }/*!sc*/ 
@media screen and 

(min-width:544px){ .irYKVt{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; } }/*!sc*/ 
@ media screen and (min-width:768px){ .irY KVt{ width:auto;margin-top:0 !important;margin-bottom:0 
!important;position:-webkit-sticky;position:sticky;top:0px;max-height: 100vh 
!'important;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:0;height: 1 0Ovh; } }/*!sc*/ 
@ media print,screen and (max-width:1011px) and (min-width:768px) { .irYK Vt{ display:none; } }/*!sc*/ 
.eUyHuk{ margin-left:0;margin-right:0;display:none;margin-top:0; }/*!sc*/ @media screen and 
(min-width:768px) {.eUyHuk{margin-left:0 !important;margin-right:0 !important; } }/*!sc*/ 
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.gNdDUH { --pane-min-width:256px;--pane-max-width-diff:5 1 1 px;--pane-max-width:calc(100vw - 
var(--pane-max-width-diff));width: 100% ;padding:0; }/*!sc*/ @media screen and 

(min-width:544px){ }/*!sc*/ @media screen and 

(min-width:768px) {.gNdDUH{ width:clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));overflow:auto; } }/*!sc*/ 
@media screen and (min-width:1280px){.gNdDUH { --pane-max-width-diff:95 9px; } }/*!sc*/ 

-hAeDYA {height: 100%;position:relative;display:none;margin-left:0; }/*!sc*/ 

.fjdBNx { position:absolute;inset:0 
-2px;cursor:col-resize;background-color:transparent;-webkit-transition-delay:0. 1s;transition-delay:0.1s;}/*!sc*/ 
fidBNx:hover{ background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193.0:2))); }/"!sc*/ 


@ media print{.emFMJu{display:-webkit-box !important;display:-webkit-flex 


!important;display:-ms-flexbox !important;display:flex !important; } }/*!sc*/ 
-hIUAHL{ width: 100%;max-width: 100%;margin-left:auto;margin-right:auto;-webkit-box-flex: | ;-webkit-flex-grow: | ;-ms-flex-positive: | ;flex-grow: | ;padding:0; }/*!sc*/ 
.iStsml{ margin-left:auto;margin-right:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:40px;max-width: 100%;margin-top:0; }/*!sc*/ 


.eIgvIk{display:inherit; }/*!sc*/ .eVFfWF{ width: 100%; }/*!sc*/ 

fywjmm { display:-webkit-box;display:-webkit-flex;dis -ms-flexbox;display:flex;gap:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width: 100%; }/*!sc*; 
dyczTK { display:-webkit-box:display:-webkit-flex:display:-ms-flexbox:display:flex: align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify justify-content:space-between;gap:8px:)/*!sc 
.cpXcux { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;min-width:0; }/*!sc*/ 
APEKxH {display:block;margin-right:8px; }/*!sc*/ @media screen and 

(min-width:1360px){.iPEkxH{ display:block; } }/*!sc*/ 
-kkrdEu{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center; }/*!sc*/ 
.trpoQ { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none; }/*!sc*/ 
.bKgizp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; width: 100%; }/*!sc*/ 
APGYsi{margin-right:4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 

.dKmY fk { font-size: 14px;min-width:0;max-width: 125px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; }/*!sc*/ 


.ehCeGn{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex:padding-left:8px;padding-right:8px;min-width:0; }/*!sc*/ 
{eT VGbF display =webkicboxsdispla!- webki-lex:displa:-ms-flexox:dspaylex-webkt-ex-ditectonrow’-m-flex-directontrow:lex-directio pxmin-widilD-webhitMlex-srink: Isms er llex shrink webkiflex‘Srapwrapms-Mes-wrapswapifles-wrapewrapanas Wh: O0%E;- Webi enter:-webkit-box-aligncenter-s-flexalig ners 


-kzRerl{max-width:100%;}/*!sc*/ 
.cmAPIB {max-width: 100%;list-style:none;display:inline-block; }/*!sc*/ 
jJwXCBK {display:inline-block;max-width: 100%; }/*!sc*/ 


.gtBUEp{ min-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start; }/*!sc*/ 
-kKfYOBR { margin-left:4px;margin-right:4px; }/*!sc*/ 
+hVZtwF{ margin-left: lopx;margin-right: 1 6px; }/"!sc*/ 


Bak [dsply.-svebkit-box:dapay-we bhi box pack: justiy-webkitjusfy-contntspac-betwen-ms-ex-pac:jutfy;usify-contentspace-between-webkit-algn-items:center webkit-bor-lighcenter-m-fex-align:cen 


fe 


@ media screen and 


(min-width:544px) {.brJRqk {-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap; } }/*!sc*/ 
.jXOmlw { top:0px;z-index:0;background:var(--bgColor-default, var(--color-canvas-default)); osition:-webkit-sticky;position:sticky; }/* !sc*/ 


.8XEGvh {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:var(--bgColor-muted, var(--color-canvas-subtle,#6f8fa));border-bottom:none;overflow:hidden; }/*!se*/ 


-kQJInf {display :none;min-width:0;padding-top:8px;padding-bottom:8px; }/*!sc*/ 


uy h peck us ebit just content pace tne mses pac;jusi ju conten space-eweenwids OF) 


-lhFvfi{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox; 
.doiYd{margin-left:-4px;margin-right:8px; }/*!sc*/ 
glo Yel Me cen we Ape ove ew biden api en bee pet 


in-a-0-wek 


splay:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center; }/*!sc*/ 


flex;display:-ms-flexbox;display:flex; }/*!sc*/ 
rapewrap-wraprahas- wil: 00%;-webki eer, webk mers? 
-yfPnm { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap: 1 6px; }/*!sc*/ 


.cAQuiW { width: 100%;border-collapse:separate; border-spacing:0;border: 1px 


solid;border-color:var(--borderColor-default, var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset; }/*!sc*/ 
.ceGBRc {height:40px; }/*!sc*/ 

jmggSN { padding: 1 6px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size: 12px;text-align:left;height:40px; }/*!sc*/ 
JjmggSN 

th{ padding-left: 16px;background-color:var(--bgColor-muted, var(--color-canvas-subtle,#f6f8fa)); }/*!sc*/ 
-kvYunM { width: 100%;border-top-left-radius:6px; }/*!sc*/ @media screen and 
(min-width:544px){.kvYunM { display:none; } }/*!sc*/ 

-hrLuxA { width:40%;border-top-left-radius:6px; }/*!sc*/ @media screen and 
(max-width:543px){.hrLuxA { display:none; } }/*!sc*/ 

.cuEKae{text-align:right;padding-right: 1 6px;width: 136px;border-top-right-radius:6px; }/*!sc*/ 

JjplAs{ font-size: 14px;height:40px; }/*!sc*/ .jpIAs 
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td{ padding-left: 1 6px;text-align:left;border-top-style:solid;border-top-width: 1 px;border-top-color:var(--borderColor-default,var(--color-border-default,#d0d7de)); }/*!sc*/ 
jplAs: hover { background- -color: “:var(--bgColor- -muted wvar(--color- canvas-subtle #f6f8fa)); PE Isc*/ 


idth: 16px;text-align:center;-webkit-letter Jetter-spaci ett ing:2peifetter-spacing:2px:display:-webkit-box: splay -webkit-flex;display:-ms-flexbox:display:flex:-webkit-align-items:center;-webkit-box-align sntersalign-items:center;}/*!sc*/ 
.epsqEd { text-align:center;vertical-align:center;height:40px;border-top: 1 px 
solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de)); }/*!sc*/ 
ld: ruc { border-top: 1px solid var(--border olor-d ult,var(--color- -border- default));cursor 


faR Oye{ min-width:0:di displ sbkit-box-pack:justif 
.dChyez{border-color:var 


bdEbiL {dlsplay:-webkit-box:display:-webkit-flex:displ 


solid;border-color: Fea boner alee default, var(--color-border-default #d0d7de)); VP lsc%/ 
.bJMeLZ{ padding:32px;overflow:auto; }/*!sc*/ 

.aZrVR { position:fixed;top:0;right:0;height: 100%; width: 15px;-webkit-transition:-webkit-transform 
0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;z-index:1;}/*!sc*/ 
-aZrVR:hover{-webkit-transform:scaleX(1.5);-ms-transform:scaleX(I.5);transform:scaleX (1.5): }/*!sc"/. 
.fczqEI {color:var(--treeViewItem-leading Visual-iconColor-rest, var(--color-icon-directory));margin-right: 1 0px; }/*!sc*/ 
data- styled. g3[id=' ‘Octicon- sc-9kayk9-0"]{ content:"fczqEI," }/*!sc*/ 
: pxb . 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cubic-bezier(0.65,0,0.35,1);-webkit-transition- propery; color, fill background: -color,border-color;transition-property:color, fill, background-color, border-color;color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f));background-color:transparent;box-shadow:none; }/*!sc*/ 


jGoVeP:focus:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
jGoVeP:focus:not(:disabled):not(:focus-visible) {outline:solid 1px transparent; }/*!sc*/ 
jGoVeP:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.jGoVeP[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
jGoVeP[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 

.jjGoVeP: hover {-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

jGoVeP:active {-webkit-transition:none;transition:none; }/*!sc*/ 

jGoVeP[data-inactive] {cursor:auto; }/*!sc*/ 

JjJGoVeP: disabled {cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.jJGoVeP:disabled [data-component=ButtonCounter],.jGoVeP:disabled 
[data-component="leading Visual" ],.jGoVeP:disabled 

[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.jGoVeP:focus{outline:solid 1px transparent; } }/*!sc*/ jGoVeP 


[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
jJGoVeP[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 


.jJGoVeP[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 1 2px; }/*!sc*/ 
jGoVeP[data-size="small"] [data-component="text"] {line-height:calc(20 / 12);}/*!sc*/ 
jGoVeP[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.jGoVeP[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.jGoVeP[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
jJGoVeP[data-size="large"] {padding:0 16px;height:40px;gap:8px; }/*!sc*/ .jGoVeP[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.jJGoVeP[data-size="large"][data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
jGoVeP[data-block="block"] { width: 100%; }/*!sc*/ 


.jJGoVeP[data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
jGoVeP[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 
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- 2px); }/*!sc*/ .jGoVeP[data-label-wrap="true" | 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.jJGoVeP[data-label-wrap="true" ][data-size="small"] { height:unset;min-height: var(--control-small-size, | .75rem); }/*!sc*/ 
jGoVeP[data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.jJGoVeP[data-label-wrap="true" |[data-size="large" | { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem); }/*!sc*/ 
jGoVeP[data-label-wrap="true" |[data-size="large"] 
[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 


jGoVeP[data-inactive] :not([disabled]):focus-visible{ box-shadow:none; }/*!sc*/ .jGoVeP 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
jJGoVeP [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
jJGoVeP [data-component="trailing Visual" ] { grid-area:trailing Visual; }/*!sc*/ jGoVeP 
[data-component="trailingAction" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.jGoVeP [data-component="buttonContent" ]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual" ;grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.jJGoVeP [data-component="buttonContent"] > :not(:last-child){ margin-right:8px; }/*!sc*/ .jGoVeP 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc*/ 


.jJGoVeP [data-component="loadingSpinner"] + [data-component="text"] { visibility:hidden; }/*!sc*/ 

jGoVeP:hover:not([disabled]) { background-color:var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ 
jJGoVeP:active:not([disabled]) { background-color: var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
jGoVeP[aria-expanded=true] { background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


jGoVeP[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.jGoVeP[data-no-visuals] { color: var(--fgColor-accent, var(--color-accent-fg,#0969da)); }/*!sc*/ 
jGoVeP:has([data-component="ButtonCounter"]) { color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
jJGoVeP:disabled[data-no-visuals] { color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
jGoVeP:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 

jGoVeP {color:var(--fgColor-muted, var(--color-fg-muted,#656d76));padding-left:8px;padding-right:8px;display:none; }/*!sc*/ 
@media screen and (max-width:768px) {.jGoVeP { display:block; } }/*!sc*/ 

seh DY, 21 border stadt px Dondero oe ala eal ae le oe a icc 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cxbic-brien0 6511035. 1-vebkivinsiionpeoperycoon il buck xcund- coor border-color transton-popertcolr fil background-color horde-colrcoorvar-baton-default-f¢Colorsesvar-coloe-txt#242921 sackground-eoorstansparenbox-shadwnone se" 
.cCRDV¢glI:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.cCRDVglI:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.cCRDV¢glI:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.cRDVgl[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.cCRDVglI[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.cCRDV¢glI:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.cCRDV¢gl:active {-webkit-transition:none;transition:none; }/*!sc*/ 


.cCRDVglI[data-inactive] {cursor:auto; }/*!sc*/ 
.cRDVglI:disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


.CRDVglI:disabled [data-component=ButtonCounter],.cRDVglI:disabled 
[data-component="leading Visual" ],.cRDVglI:disabled 
[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
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(forced-colors:active){.cRDVglI:focus{outline:solid 1px transparent; }}/*!sc*/ .cRDVglI 
[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 

.cRDVglI[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.CRDVgl[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 1 2px; }/*!sc*/ 
.cRDVglI[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.cRDVglI[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.cCRDVglI[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.CRDVgl[data-size="small" ][data-component=IconButton] { width:28px;padding: unset; }/*!sc*/ 
.cCRDVgl[data-size="large"]{ padding:0 16px;height:40px;gap: 8px; }/*!sc*/ .cRDVgI[data-size="large" ] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.cCRDVgl[data-size="large" || data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.cCRDVglI[data-block="block"] { width: 100%; }/*!sc*/ 


.cRDV gl [data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height: var(--control-medium-size,2rem); }/*!sc*/ 
.cCRDVglI[data-label-wrap="true"] [data-component="buttonContent"] {-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .cRDV gl [data-label-wrap="true" ] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.cRDV gl [data-label-wrap="true"][data-size="small"] { height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
.cCRDVglI[data-label-wrap="true"][data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.cCRDV¢gl[data-label-wrap="true"][data-size="large"] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, l rem); }/*!sc*/ 
.cCRDVglI[data-label-wrap="true"][data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px); }/*!sc*/ 


alfdat ot([disabled}) (background-color: var(--button-inactive-bgColor. var(~-button-inactive-bgColor-rest,var(--color-btn-inactive-bg #eaee!2)));border-color:var(--butt -bgColor var(—-but -bgColor-rest,var(-color-btn-inactive-bg #eaee!2))):color:var(—-butt Color. var(--button- £Color-rest,var(~color-bin-inactive-text,#57606a)));)/*!se°7 


.cRDVglI[data- Gnasivel ‘not((disabled}): focie: visible{ bow shadow: none; er }/#lsc*/ cRDVel 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.cCRDVglI [data-component="text"]{ grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.cRDVglI [data-component="trailing Visual" ] { grid-area:trailing Visual; }/*!sc*/ .cRDVgl 
[data-component=" trailing Action" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.cCRDVglI [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.CRDVglI [data-component="buttonContent"] > :not(:last-child){margin-right:8px; }/*!sc*/ .cRDVgl 
[data-component="loadingSpinner"] { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 


.cCRDVglI [data-component="loadingSpinner"] + [data-component="text"] { visibility:hidden; }/*!sc*/ 

.cRDVgl:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 
.cRDV¢gl:active:not([disabled]) { background-color: var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
.cRDV gl [aria-expanded=true] { background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


.cRDVglI[data-component="IconButton" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.cRDV gl[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76));height:32px;position:relative; }/*!sc*/ 
@media screen and (max-width:768px) {.cRDVgI[data-no-visuals] { display:none; } }/*!sc*/ 
.cCRDVglI:has([data-component="ButtonCounter"]){ color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
.cRDVegI:disabled[data-no-visuals] { color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.cCRDV¢glI:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 
jBaXngq{border-radius:6px;border:lpx 


12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- n-width:t max-content; s-webkit-t transition: n:80ms 
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cubic- -bezier(0. 65, 0, 05351); transition: 80ms © 


1px 0 rgba(31,35,40,0.04))), var(--button- default- ee inset er ae bist inset- ‘shadow: inset 10 px 0 
rgba(255,255,255,0.25)));}/*!sc*/ jBaXnq:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
jBaXnq:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.jBaXnq;:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.jBaXnq[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.jBaXnq[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.jBaXnq:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.jBaXnq:active {-webkit-transition:none;transition:none; }/*!sc*/ 
,|BaXnq[data-inactive]{cursor:auto;}/*!sc"/ 


(0.15))):background-co -control-bgColor-disabled,vart--color-input-disabled-bg.tpba(175,184,193.0.2))):}/*!se%F 


.jBaXnq:disabled [data- -component=ButtonCounterl feel inherit VP lsc*/ ‘@media 
(forced-colors:active){.jBaXnq:focus{outline:solid 1px transparent; }}/*!sc*/ jBaxXnq 
[data~-component=ButtonCounter] { font-size: 1 2px;background-color:var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg,rgba(31,35,40,0.08))); }/*!sc*/ 
jBaXnq[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.jBaXnq[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 1 2px; }/*!sc*/ 
.jBaXnq[data-size="small"] [data-component="text"] {line-height:calc(20 / 12);}/*!sc*/ 
.jBaXnq[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
jBaXnq|[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.jBaXnq[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.jBaXnq[data-size="large"] { padding:0 16px;height:40px; gap: 8px; }/*!sc*/ .jBaXnq[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.jBaXnq[data-size="large"][data-component=IconButton] { width:40px;padding: unset; }/*!sc*/ 
.jBaXnq[data-block="block"]{ width: 100%; }/*!sc*/ 


.JBaXnq[data-label-wrap="true" ] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.jBaXnq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px);}/*!sc*/ .jBaXnq[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.JBaXnq[data-label-wrap="true" ][data-size="small"] { height:unset;min-height:var(--control-small-size, |.75rem); }/*!sc*/ 
jBaXnq|[data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.jBaXnq[data-label-wrap="true" |[data-size="large"] { height:unset;min-height: var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem); }/*!sc*/ 
jBaXnq[data-label-wrap="true" |[data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 

2 


.jBaXnq[data-inactive] :not([disabled]):focus-visible { box-shadow:none; }/*!sc*/ .jBaXnq 
[data-component="leading Visual" ]{ grid-area:leading Visual; }/*!sc*/ jBaXnq 
[data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ jBaXnq 
[data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ jBaXnq 
[data-component="trailingAction"] {margin-right:-4px; }/*!sc*/ jBaxXnq 
[data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 

auto;display: grid; grid-template-areas: "leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


Ks 
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min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.jBaXnq [data-component="buttonContent"] > :not(:last-child){margin-right:8px; }/*!sc*/ .jBaXnq 
ata-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc 
[dat p t="loadingSp ]{ grid text gin-right: !important;pl If:center; }/*!sc*/ 
Here [data-component=' ‘loadingSpinner" | + [data-component="text"] { visibility:hidden; }/*!sc*/ 


'aXng:hover:not({disable ed)-no {data inactive}) {background-color:var(--button-default-bgCoTor-hovér, var(--color-btn-hover-bg.#f3f416));border-color:var(--blitton-default-borderColor-hover, var(--button-default-borderColof-hover, var(--color-btn- over-border -rgba(31,35,40,0.15))));}/#!se*/ 
ia aXng:active:not([disabled}):not({data-inactive]) {background-color:var(—button-d n-active-bg,hsla(220,14%,93%,1))): Jor:var(--button-default-border ar(--button-default-borde border.rgba(31,35,40,0.15))));}/*Isc*/ 
jBaXng[aria- vexpanded-iue]{(bacl ground color:var-button-default bgColor-a sla(220,14%,93%,1))):border-col uutton-default-borderColor-ai tton-default-borderColor rder,rgba(31,35,40,0.15))));}/*!se"/ 


.jBaXnq [data-component="leading Visual"],.jBaXnq [data-component="trailing Visual"],.jBaXnq 
[data-component="trailing Action" ] { color:var(--button-color, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.jBaXnq[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.jBaXnq{ display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }/*!sc*/ jBaXnq 
svg {color:var(--fgColor-muted,var(--color-fg-muted,#656d76)); }/*!sc*/ jBaXnq > 
span { width:inherit; }/*!sc*/ .emYRmJ{border-radius:6px;border:Ipx. 7 7 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content; sowebkit: sransitioni6Onis 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cabic-brien0 650.3, 1-vebhirnsition peopcrycolon il ackdecund- color border oto tanston-popert:colr fil backround.colrhorde-colorcoorvarbaton-defalt-f¢Colorsesvar-cooeb txt #242921 sackground-eoorstansparenbox-shado:none se 
.emYRmJ:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
.emYRmJ:focus:not(:disabled):not(:focus-visible) { outline:solid 1px transparent; }/*!sc*/ 
.emYRmJ:focus-visible:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.emYRmjJ[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.emYRmJ[href]:hover{-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.emYRmJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.emYRmJ:active { -webkit-transition:none;transition:none; }/*!sc*/ 


.emYRmJ[data-inactive] { cursor:auto; }/*!sc*/ 
.emYRmJ:disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


.emYRmJ:disabled [data-component=ButtonCounter],.em YRmJ:disabled 
[data-component="leading Visual" ],.em YRmJ:disabled 
[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.emYRmjJ:focus {outline:solid 1px transparent; }}/*!sc*/ .emYRmJ 


[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.emYRm/J[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 


.emYRmJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px; }/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component="text"] { line-height:calc(20 / 12);}/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.emYRmjJ[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.em YRmJ[data-size="small" ][data-component=IconButton] { width:28px;padding:unset; }/*!sc*/ 
.emYRmJ[data-size="large"]{padding:0 16px;height:40px; gap: 8px; }/*!sc*/ .emYRm/J[data-size="large"] 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.emYRmJ[data-size="large" |[data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.emYRm/J[data-block="block"]{ width: 100%; }/*!sc*/ 


.emYRmJ[data-label-wrap="true" | { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.emYRmjJ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .emY RmJ[data-label-wrap="true" | 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 

.emY RmJ[data-label-wrap="true" |[data-size="small"] {height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
.emYRmjJ[data-label-wrap="true"][data-size="small"] 
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[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


emYRmJ[data-label-wrap="true"][data-size="large" ] {hei ght:unset;min-hei ght: var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem);}/*!sc*/ 
.emYRmjJ[data-label-wrap="true"][data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px); }/*!sc*/ 


Ve]:not(|disabled)) background-color:var(--button-inactive-bgColor.var(--button-inactive-bgColor-test,var(--color-btn-inactive-bg.#teaeef2)) :border-color:var(--button-inactive-beColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg, teaeet2));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-bin-inactive-text#57606a))); "se"? 


.emYRmJ[data- inactive: riot({ disabled): foes: visible (box: ‘shadow. none; Pl sc*/ emYRml 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.emYRmjJ [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.emYRmjJ [data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .emYRmJ 
[data-component=" trailing Action" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.emYRmJ [data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 
trailing Visual" ;grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.emYRmjJ [data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ .emYRmJ 
[data-component="loadingSpinner"] { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 


.emYRmjJ [data-component="loadingSpinner"] + [data-component="text"]{ visibility:hidden; }/*!sc*/ 

.emYRmJ:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 
.emYRmJ:active:not([disabled]) { background-color:var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ 
.emYRmJ[aria-expanded=true] { background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); }/*!sc*/ 


.emYRmJ[data-component="IconButton" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.emYRmjJ[data-no-visuals] { color:var(--fgColor-accent,var(--color-accent-fg,#0969da)); }/*!sc*/ 
.emYRmjJ:has([data-component="ButtonCounter" ]) {color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
.emY RmJ:disabled[data-no-visuals] { color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.emYRmJ:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 
-kuXPuQ{border-radius:6px;border:lpx. 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min- n-width:t max-content; :-webkit-t transition: n:80ms 


cubic- bezier(0. 65. 0; 0353.1); ;transition:8 80ms 


21(0.65,0,0.35,1) 9 .color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292P));background-color:vari--button-default-bgColor-rest,var(--color-bin-bg. #f618fa)):box-shadow:var(--button-default-shadow-resting.var(~-color-bin-shadow.0 


1px 0 sabia(1 35.40.0104) )aant <Ulton- default: sharon anisel van colon Hincinsel-shadowsrise! 0 Ipx 0 
rgba(255,255,255,0.25)));}/*!sc*/ .kuXPuQ:focus:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
-kuXPuQ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent; }/*!sc*/ 
-kuXPuQ:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
-kuXPuQ[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
-kuXPuQ[href]:hover {-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
-kuXPuQ:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 
-kuXPuQ: active{- webkit- transition:none;transition:none; }/*!sc*/ 

XP 


SuxPucalstbled ou 


-kuXPuQ:disabled [data- cconiponent=Butien@ouitell ]{color: jaherit: }/*lsc*/ @media 
(forced-colors:active){.kuXPuQ:focus{outline:solid 1px transparent; }}/*!sc*/ .kuXPuQ 


[data~-component=ButtonCounter] { font-size: 1 2px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(3 1,35,40,0.08))); }/*!sc*/ 
-kuXPuQ[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
-kuXPuQ[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 12px; }/*!sc*/ 
-kuXPuQ[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
-kuXPuQ[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
-kuXPuQ[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 
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-kuXPuQ[data-size="small"][data-component=IconButton] { width:28px;padding: unset; }/*!sc*/ 
-kuXPuQ[data-size="large"]{ padding:0 16px;height:40px;gap:8px; }/*!sc*/ .kuXPuQ[data-size="large" | 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
-kuXPuQ[data-size="large"][data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
-kuXPuQ|[data-block="block"] { width: 100%; }/*!sc*/ 


-kuXPuQ[data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
-kuXPuQ[data-label-wrap="true"] [data-component="buttonContent"] {-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .kuXPuQ[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
-kuXPuQ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
-kuXPuQ[data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


kuXPuQ[data-label-wrap="true"[data-size="large"] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem);}/*!sc*/ 
-kuXPuQ[data-label-wrap="true" ][data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
‘kuXPuQ|[data- inactive]:not([disabled]):focus-visible{ box-shadow:none; }/*!sc*/ .kuXPuQ 
[data-component="leading Visual" ]{ grid-area:leading Visual; }/*!sc*/ .kuXPuQ 
[data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ .kuXPuQ 
[data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .kuXPuQ 
[data-component="trailingAction"] {margin-right:-4px; }/*!sc*/ .kuXPuQ 
[data-component="buttonContent"] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 


-kuXPuQ [data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ .kuXPuQ 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px Wee ease Ree }/¥ !sc*/ 
eircom Get SEIS ate nate ] + [data-component="text" ] { visibility: 


kuXPuQhov pe) bat efaul 131416)):border- 
kuXPuQzacti 9 
-kuXPuQ[ari 


a3 y 
(31, 35,40,0. 15)))); Ise" 


kuXPuQ [data-component="leading Visual"],.kuXPuQ [data-component="trailing Visual"],.kuXPuQ 
[data-component="trailing Action" ] { color:var(--button-color, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
-kuXPuQ[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


-kuXPuQ[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.bDTxaKk {border-radius:6px;border:lpx a 
12px;gap:8px;min-width:-webkit-max-content;min- width: -moz-max- content: min- width:r max- content; :-webkit-t feansition: n:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cabic-brien0 651.035, 1-webkivnsiion-peoperycoon il uckrcund-eolor border-color ranston-poperteolr fil backeround.colrhorde-colorcoorvarbaton-default-f¢Colorses.var~color-bn-text #242920 sackground-eolrtansparentbox-shadonone/#se4 
-bDTxaK:focus:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
-bDTxaK:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent; }/*!sc*/ 
-bDTxaK:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

-bDTxaK [href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
.bDTxaK [href] :hover { -webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.bDTxaK:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.bDTxaK: active {-webkit-transition:none;transition:none; }/*!sc*/ 
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.bDTxaK[data-inactive] { cursor:auto; }/*!sc*/ 
-bDTxaK: disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 


-bDTxaK:disabled [data-component=ButtonCounter],.bDTxaK:disabled 
[data-component="leading Visual" ],.bDTxaK:disabled 

[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.bDTxaK:focus{outline:solid 1px transparent; } }/*!sc*/ .bbDTxaK 
[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 

.bDTxaK[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.bDTxaK[data-size="small"]{ padding:0 

8px;height:28px;gap:4px;font-size: 12px;color:var(--fgColor-default, var(--color-fg-default,#1F2328));margin-left:8px; }/*!sc*/ 
.bDTxaK[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.bDTxaK[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
-bDTxaK[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.bDTxaK[data-size="small"][data-component=IconButton] { width:28px;padding: unset; }/*!sc*/ 
.bDTxaK[data-size="large"]{padding:0 16px;height:40px;gap:8px; }/*!sc*/ .bDTxaK[data-size="large" | 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.bDTxaK[data-size="large" |[data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.bDTxaK[data-block="block"] { width: 100%; }/*!sc*/ 


-bDTxaK[data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.bDTxaK[data-label-wrap="true"] [data-component="buttonContent"] {-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .bDTxaK[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
.bDTxaK[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size, 1.75rem); }/*!sc*/ 
-bDTxaK [data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


-bDTxaK[data-label-wrap="true" |[data-size="large" ] { height:unset;min-height: var(--control-large-size,2.5rem);padding-inline: var(--control-large-paddingInline-spacious, rem); }/*!sc*/ 
.bDTxaK[data-label-wrap="true" |[data-size="large"] 
[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
KI oc%* 
at I ee had ate ts 


bDTxaK[data-i inactive] J:not((disabled] ): focus: -visible{ ho: shadow: none; VP lsc#/ bDTxak~ 
[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 


.bDTxaK [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.bDTxaK [data-component="trailing Visual"] { grid-area:trailing Visual; }/*!sc*/ .bDTxaK 
[data-component="trailingAction"] {margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
-bDTxaK [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual" ;grid-template-columns:min-content minmax(0,auto) 
min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.bDTxaK [data-component="buttonContent"] > :not(:last-child){margin-right:8px; }/*!sc*/ .bDTxaK 
[data-component="loadingSpinner"] { grid-area:text;margin-right:0px !important;place-self:center; }/*!sc*/ 
.bDTxaK [data-component="loadingSpinner"] + [data-component="text"]{ visibility:hidden; }/*!sc*/ 
-bDTxaK:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 


-bDTxaK:active:not([disabled]) { background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
-bDTxaK [aria-expanded=true] { background-color: var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


.bDTxaK[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
-bDTxaK [data-no-visuals] { color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); }/*!sc*/ 
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-bDTxaK:has([data-component="ButtonCounter"]) { color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
-bDTxaK:disabled[data-no-visuals] {color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.bDTxaK:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 

-bjzmDm{border-radius:6px;border: 1px ce ennai 
12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms 


cubic-bezier(0.65,0,0.35,1);transition:80ms 


cabic-brien0 650.3, 1)-webhiransition peoperycolon il ackrcund-color border-color transition popert:colr fil backround.colrhorde-colorcoorvarbaton-default-f¢Colorsesvar-coloe-txt#242921 sackground-eoorstansparenbox-shadwnone se 
.bjzmDm:focus:not(:disabled) {box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 
-bjzmDm:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent; }/*!sc*/ 
.bjzmDm:focus-visible:not(:disabled) { box-shadow:none;outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px; }/*!sc*/ 

.bjzmDm[href] { display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex; }/*!sc*/ 
-bjzmDm[href]:hover {-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
.bjzmDm:hover{-webkit-transition-duration:80ms;transition-duration:80ms; }/*!sc*/ 

.bjzmDm:active {-webkit-transition:none;transition:none; }/*!sc*/ 

.bjzmDm{[data-inactive] {cursor:auto; }/*!sc*/ 

.bjzmDm:disabled { cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.bjzmDm:disabled [data-component=ButtonCounter],.bjzmDm:disabled 
[data-component="leading Visual" ],.bjzmDm:disabled 

[data-component="trailingAction"] {color:inherit; }/*!sc*/ @media 
(forced-colors:active){.bjzmDm:focus{outline:solid 1px transparent; } }/*!sc*/ .bjzmDm 
[data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 

.bjzmDm]|[data-component=IconButton] { display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset; }/*!sc*/ 
.bjzmDm[data-size="small"]{ padding:0 8px;height:28px;gap:4px;font-size: 12px; }/*!sc*/ 
.bjzmDm{[data-size="small"] [data-component="text"] {line-height:calc(20 / 12); }/*!sc*/ 
.bjzmDm[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; }/*!sc*/ 
.bjzmDm[data-size="small"] [data-component="buttonContent"] > 

:not(:last-child) {margin-right:4px; }/*!sc*/ 

.bjzmDm[data-size="small"][data-component=IconButton] { width:28px;padding: unset; }/*!sc*/ 
.bjzmDm[data-size="large"]{ padding:0 16px;height:40px;gap:8px; }/*!sc*/ .bjzmDm[data-size="large" | 
[data-component="buttonContent"] > :not(:last-child) {margin-right:8px; }/*!sc*/ 
.bjzmDm[data-size="large"][data-component=IconButton] { width:40px;padding:unset; }/*!sc*/ 
.bjzmDm{[data-block="block"] { width: 100%; }/*!sc*/ 


-bjzmDm[data-label-wrap="true"] { min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem); }/*!sc*/ 
.bjzmDm{[data-label-wrap="true"] [data-component="buttonContent"] {-webkit-flex:1 1 auto;-ms-flex:1 1 


auto;flex:1 1 
auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) 


- 2px); }/*!sc*/ .bjzmDm[data-label-wrap="true"] 

[data-component="text"]{ white-space:unset;word-break:break-word; }/*!sc*/ 
.bjzmDm[data-label-wrap="true" ][data-size="small"] { height:unset;min-height:var(--control-small-size, |.75rem); }/*!sc*/ 
.bjzmDm{[data-label-wrap="true" |[data-size="small"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 
2px); }/*!sc*/ 


.bjzmDm[data-label-wrap="true" |[data-size=" large" ] { height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious, lrem);}/*!sc*/ 
.bjzmDm[data-label-wrap="true" |[data-size="large"] 

[data-component="buttonContent"] { padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 
2px), j/t ison 


¥e]:not [disabled)) (background-color:var(--button-inactive-bgColor.var(--button-inactive-bgColor-rest,var(~-color-btn-inactive-bg,fteaeet2))):border-color:var(—-button-inactive-bgColor var(--button-inactive-bgColor-testvar(~-color-btn-inactive-bg.steaeef2))):color:var(--button-inactive-fgColor,var(--button-inactiv 


.bjzmDm[data-inactive]:not([disabled]):focus-visible { box-shadow:none; }/*!sc*/ .bjzmDm 


e-fgColor-test.var(--color-btn-inactive-text,#57606a)));)/*Ise*/ 
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[data-component="leading Visual" ] { grid-area:leading Visual;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.bjzmDm [data-component="text"] { grid-area:text;line-height:calc(20/14);white-space:nowrap; }/*!sc*/ 
.bjzmDm [data-component="trailing Visual" ] { grid-area:trailing Visual; }/*!sc*/ .bjzmDm 
[data-component=" trailing Action" ]{margin-right:-4px;color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.bjzmDm [data-component="buttonContent" ] {-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 
auto;display:grid;grid-template-areas:" leading Visual text 

trailing Visual"; grid-template-columns:min-content minmax(0,auto) 


min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center; }/*!sc*/ 
.bjzmDm [data-component="buttonContent"] > :not(:last-child) { margin-right:8px; }/*!sc*/ .bjzmDm 
[data-component="loadingSpinner"] { grid-area:text;margin-right:Opx !important;place-self:center; }/*!sc*/ 
.bjzmDm [data-component="loadingSpinner"] + [data-component="text"]{ visibility:hidden; }/*!sc*/ 
-bjzmDm:hover:not([disabled]) { background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); }/*!sc*/ 


-.bjzmDm:active:not([disabled]) { background-color: var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); }/*!sc*/ 
-bjzmDm[aria-expanded=true] { background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ 


.bjzmDm{[data-component="IconButton" |[data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted,#656d76)); }/*!sc*/ 
.bjzmDm[data-no-visuals] { color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); }/*!sc*/ 
-bjzmDm:has([data-component="ButtonCounter"]) {color:var(--button-default-fgColor-rest, var(--color-btn-text,#24292f)); }/*!sc*/ 
.bjzmDm:disabled[data-no-visuals] { color:var(--fgColor-disabled, var(--color-primer-fg-disabled,#8c959f)); }/*!sc*/ 
.bjzmDm:disabled[data-no-visuals] [data-component=ButtonCounter] { color:inherit; }/*!sc*/ 
.bjzmDm|[data-size="small" ][data-no-visuals] { color:var(--fgColor-muted, var(--color-fg-muted));margin-right:0; }/*!sc*/ 
data-styled.g4[id="types__StyledButton-sc-ws60qy-0"]{content:"jGoVeP,cRDVgl,jBaXng,emYRmJ,kuXPuQ,bDTxaK,bjzmDm," }/*!sc*/ 
-ipy MWB {color:var(--fgColor-accent,var(--color-accent-fg,#0969da));-webkit-text-decoration:none;text-decoration:none;font-weight:600; }/*!sc*/ 
[data-al1y-link-underlines=’ true’ ] 

-Link__StyledLink-sc-14289xe-0[data-inline=’ true’ ] {-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 
. ipyMWB shover{-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 


is(button) { display:inline-block;padding:0;font-size:inherit:white-space:nowrap;cursor:pointer;-webkit-user-select:none:-moz-user-select:none;-ms-user-select:none:user-select:none;background-color:transparent:border:0;-webkit-appearance:none:-moz-appearance:none;appearance:none;}/*!sc*/ 
.dheQRw { color:var(--fgColor-accent,var(--color-accent-fg,#0969da));-webkit-text-decoration:none;text-decoration:none; }/*!sc*/ 
[data-al1y-link-underlines=’ true’ ] 

-Link__StyledLink-sc-14289xe-0[data-inline=’ true’ ] {-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 
-dheQRw:hover{-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 

.dheQRw:is(button) { display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent:border:0;-webkit-appearance:none;-moz-appearance:none:appearance:none:}/*!sc*/ 
-GsMkwW { color: var(--fgColor-muted, var(--color-fg-muted,#656d76));-webkit-text-decoration:none;text-decoration:none;font-weight:600;-webkit-text-decoration:none;text-decoration:none;cursor:pointer; }/*!sc*/ 
[data-al1y-link-underlines=’ true’ ] 

.Link__StyledLink-sc-14289xe-0[data-inline=’ true’ ] {-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 
.GsMkW:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--fgColor-accent, var(--color-accent-fg,#0969da)); }/*!sc*/ 


.GsMW:is(button) { display: inline-block;padding:0;font-size inherit;white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:0;-webkit-appearance:none;-moz~appearance:none;appearance:none; /*!sc*/ 


.GsMkW:hover { -webkit-text-decoration:none;text-decoration:none; }/*!sc*/ .GsMkW:focus:focus-visible 
div{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px; }/*!sc*/ 


_kPwRsz{ color:var(--fgColor-accent,var(--color-accent-fg,#0969da));-webkit-text-decoration:none;text-decoration:none;color:var(--fgColor-default, var(--color-fg-default,#1F2328)); }/*!sc*/ 
[data-al1y-link-underlines=’ true’ ] 

-Link__StyledLink-sc-14289xe-0[data-inline=’ true’ ] {-webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 
.kPwRsz ‘hover{ -webkit-text-decoration:underline;text-decoration:underline; }/*!sc*/ 


-kPwRsz:hover{color:var(--fgColor-accent, var(--color-accent-fg,#0969da)); }/*!sc*/ 
data-styled.g9[id="Link__ StyledLink-sc-14289xe-0"] {content:"ipyMWB,dheQRw,GsMkW,kPwRsz," }/*!sc*/ 
.gNgnV1I{ position:relative;display:inline-block; }/*!sc*/ 

.gNenVI::after{ position:absolute;z-index: 1000000;display:none;padding:0.5em 0.75em;font:normal 
normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto 

Sans" if," App 
@-webkit-keyframes tooltip-appear{from{opacity:0; }to{ opacity: 1;}}/*!sc*/ @keyframes 
tooltip-appear{ from { opacity:0; }to{ opacity: 15} }/*!sc*/ 


he ony 
.gNgnVI1.tooltipped-no-delay:hover::after,.gNgn V1.tooltipped-no-delay:active::after,.gNgn V1.tooltipped-no-delay:focus::after,.gNgnV1.tooltipped-no-delay:focus-withi VF Isc*/ 
-gNgnVI1.tooltipped-multiline:hover::after,.gNgnV1.tooltipped-multiline:active::after,.gNgnV1.tooltipped-multiline:focus::after,.gNgn V1.tooltipped-multiline:focus-within::after { display:table-cell; }/*!sc*/ 


.gNgnVI1.tooltipped-s::after,.g Ngn V1.tooltipped-se::after,.gNgnV1.tooltipped-sw::after { top: 100% ;right:50%;margin-top:6px; }/*!sc*/ 
.gNgnV1L.tooltipped-se::after { right:auto;left:50% ;margin-left:- 16px; }/*!sc*/ 
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.gNgnV1.tooltipped-sw::after { margin-right:-16px; }/*!sc*/ 

.gNgnVI.tooltipped-n::after,.gNgnV1.tooltipped-ne::after,.gNgn V1.tooltipped-nw::after {right:50%;bottom: 100%;margin-bottom:6px; }/*!sc*/ 
.gNgnVI1.tooltipped-ne::after {right:auto;left:50% ;margin-left:- 1 6px; }/*!sc*/ 

.gNgnV1.tooltipped-nw::after {margin-right:-16px; }/*!sc*/ 

.gNgnV1.tooltipped-s::after,.gNgn V1.tooltipped-n::after {-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%); }/*!sc*/ 
-gNgnV1.tooltipped-w::after { right: 100%;bottom:50% ;margin-right: 6px;-webkit-transform:translate Y (50%);-ms-transform: translate Y (50% );transform:translate Y (50%); }/*!sc*/ 
.gNgnV1.tooltipped-e::after { bottom:50%;left: 100% ;margin-left:6px;-webkit-transform:translate Y (50%);-ms-transform:translate Y (50%);transform:translate Y (50%); }/*!sc*/ 


-gNgnV1.tooltipped-multiline::after{ width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word; white-space: pre-line;border-collapse:separate; }/*!sc*/ 
-gNgnV1.tooltipped-multiline.tooltipped-s::after,.gNgnV1.tooltipped-multiline.tooltipped-n::after {right:auto;left:50%;-webkit-transform:translateX (-50% );-ms-transform:translateX (-50%);transform:translateX (-50%); }/*!sc*/ 


.gNgnV1.tooltipped-multiline.tooltipped-w::after,.gNgnV1.tooltipped-multiline.tooltipped-e::after { right: 100%; }/*!sc*/ 
.gNgnV1.tooltipped-align-right-2::after {right:0;margin-right:0; }/*!sc*/ 
.gNgnV1.tooltipped-align-left-2::after {left:0;margin-left:0; }/*!sc*/ 
data-styled.g10[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"gNgnVI1," }/*!sc*/ 

.dHiONX { display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width: 125px; }/*!sc*/ 


data-styled.g14[id="Truncate__StyledTruncate-sc-2301d2-0"]{content:"dliONX,"}/*!sc*/ 


.cXNreu { font-size: 14px;line-height:20px;color:var(--fgColor-default, var(--color-fg-default,#1F2328));vertical-align:middle;background-color:var(--bgColor-default,var(--color-canvas-default #ffffff));border: 1 px 


solid 


var(--control-borderColor-rest, var(--borderColor-default,var(--color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow: var(--shadow- inset, var(--color-primer-shadow-inset,inset 


.cXNreu input,.cXNreu textarea{cursor:text; }/*!sc*/ .cXNreu select{cursor:pointer; }/*!sc*/ .cXNreu 
input::-webkit-input-placeholder,.cXNreu textarea: :-webkit-input-placeholder,.cXNreu 
select::-webkit-input-placeholder { color: var(---control-fgColor-placeholder, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.cXNreu input::-moz-placeholder,.cXNreu textarea::-moz-placeholder,.cXNreu 

select::-moz-placeholder { color: var(---control-fgColor-placeholder, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.cXNreu input:-ms-input-placeholder,.cXNreu textarea:-ms-input-placeholder,.cXNreu 
select:-ms-input-placeholder{ color:var(---control-fgColor-placeholder, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.cXNreu input::placeholder,.cXNreu textarea: :placeholder,.cXNreu 
select::placeholder{color:var(---control-fgColor-placeholder, var(--fgColor-muted, var(--color-fg-muted,#656d76))); }/*!sc*/ 
.cXNreu:focus-within { border-color: var(--fgColor-accent, var(--color-accent-fg,#0969da));outline:2px solid 
var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:- 1px; }/*!sc*/ .cXNreu > 

textarea { padding: 12px; }/*!sc*/ @media (min-width:768px) {.cXNreu{ font-size: 14px; } }/*!sc*/ 
data-styled.g17[id="TextInputWrapper__TextInputBaseWrapper-sc- 1 mqhpbi-0"]{ content:"cXNreu,"}/*!sc*/ 
jbzqwE{background-repeat:no-repeat;background-position:right 8px 

center;padding-left: 12px;padding-right: 12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width: 160px; }/*!sc*/ 
jJbzqwE > :not(:last-child) { margin-right:8px; }/*!sc*/ jbzqwE .TextInput-icon, .jbzqwE 

.TextInput-action {-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color: var(--fgColor-muted, var(--color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0; }/*!sc*/ 
jbzqwE > input,.jbzqwE > select {padding-left:0;padding-right:0; }/*!sc*/ 
data-styled.g18[id="TextInputWrapper-sc-1mqhpbi-1"]{content:"jbzqwE," }/*!sc*/ 
.cDLBIs{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width: 100%; }/*!sc*/ 


.cDLBIs:focus{ outline:0; }/*!sc*/ 
data-styled.g19[id="UnstyledTextInput-sc-14ypya-0"]{content:"cDLBIs,"}/*!sc*/ 

-bOMzPg{ min-width:0; }/*!sc*/ 

-bOMzPg:where([data-size=’ small’ ]) { font-size: var(--text-body-size-small,0.75rem); line-height: var(--text-body-lineHeight-small, | .6666); }/*!sc*/ 
.bOMzPg:where([data-size=’ medium’ }){ font-size: var(--text-body-size-medium,0.875rem); line-height: var(--text-body-lineHeight-medium, 1.4285); }/*!sc*/ 
-bOMzPg:where([data-size=’ large’ ]) { font-size:var(--text-body-size-large, lrem);line-height:var(--text-body-lineHeight-large, 1.5); }/*!sc*/ 
.bOMzPg:where([data-weight=’ light’ ]) { font-weight:var(--base-text-weight-light,300); }/*!sc*/ 
-bOMzPg:where([data-weight=’normal’ ]) { font-weight:var(--base-text-weight-normal,400); }/*!sc*/ 
-bOMzPg:where([data-weight=’medium’ ]){ font-weight: var(--base-text-weight-medium,500); }/*!sc*/ 
-bOMzPg:where([data-weight=’ semibold’ ]) {font-weight:var(--base-text-weight-semibold,600); }/*!sc*/ 

fs VJr{ padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted, var(--color-fg-muted,#656d76));font-size: 16px; }/*!sc*/ 
.fls VJr:where([data-size=’ small’ ]) { font-size: var(--text-body-size-small,0.75rem); line-height: var(--text-body-lineHeight-small, 1.6666); }/*!sc*/ 
.fls VJr:where([data-size=’ medium’ ]) { font-size: var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium, 1.4285); }/*!sc*/ 
.fIs VJr:where([data-size=’ large’ ]) { font-size: var(--text-body-size-large, | rem);line-height: var(--text-body-lineHeight-large, 1.5); }/*!sc*/ 
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.fIs VJr:where([data-weight=’ light’ ]) { font-weight: var(--base-text-weight-light,300); }/*!sc*/ 
.fIs VJr:where([data-weight=’ normal’ ]) { font-weight: var(--base-text-weight-normal,400); }/*!sc*/ 
.fIs VJr:where([data-weight=’ medium’ ]) { font-weight: var(--base-text-weight-medium,500); }/*!sc*/ 


.fIs VJr:where([data-weight=’ semibold’ ]){ font-weight: var(--base-text-weight-semibold,600); }/*!sc*/ 
.cYJMDB { padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted, var(--color-fg-muted,#656d76));font-size: 14px; }/*!sc*/ 
.cYjMDB:where([data-size=’ small’ ]) { font-size: var(--text-body-size-small,0.75rem);line-height: var(--text-body-lineHeight-small, | .6666); }/*!sc*/ 
.cYJMDB:where([data-size=’ medium’ ]){ font-size: var(--text-body-size-medium,0.875rem);line-height: var(--text-body-lineHeight-medium, 1.4285); }/*!sc*/ 
.cYjMDB:where([data-size=’ large’ ]) { font-size: var(--text-body-size-large, lrem);line-height: var(--text-body-lineHeight-large, 1.5); }/*!sc*/ 
.cYjMDB:where([data-weight=’ light’ ]) { font-weight: var(--base-text-weight-light,300); }/*!sc*/ 
.cYjJMDB:where([data-weight=’ normal’ ]) { font-weight:var(--base-text-weight-normal,400); }/*!sc*/ 
.cYjMDB:where([data-weight=’ medium’ ]){ font-weight: var(--base-text-weight-medium,500); }/*!sc*/ 
.cYjMDB:where([data-weight=’ semibold’ ]){ font-weight: var(--base-text-weight-semibold,600); }/*!sc*/ 
data-styled.g24[id="Text-sc-17v1xeu-0"]{content:"bOMzPg,fls VJr,c YJMDB," }/*!sc*/ 
body|data-page-layout-dragging="true"]{cursor:col-resize; }/*!sc*/ 
body[data-page-layout-dragging="true"] 

* {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; }/*!sc*/ 
data-styled.g29[id="sc-global-gbKrvU1"]{content:"sc-global-gbKrvU1,"}/*!sc*/ 
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README.md 


Yew Examples 


How to Run 


The examples are built with [trunk] Once you have the development environment fully set up (see 


documentation), running an example is as easy as running a single command: 


# move into the directory of the example you want to run 
# In this case it’s the todomvc example 
cd examples/todomvc 


# build and serve th xampl 
trunk serve --open 


Some examples may perform better using the release profile. If something is slow, you can try running 
it with the --release argument. 


We’re also publicly hosting the examples at https: //examples.yew.rs/<EXAMPLE>. As an 


example, check out the TodoMVC example here: |https://examples.yew.rs/todomve 


List of Examples 


Communication from child to parent 
components. 


Example Description 
Demonstrates the use of asynchronous tasks 
in a yew component. 
boids Yew port of 


communication_child_to_parent 


Communication from grandchildren to 
grandparent components. 


communication_grandchild_with_grandparent 


Kea 


Communication from grandparent to 


communication_grandparent_to_ grandchild : 
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Communication from parent to child 
components. 


communication_parent_to_child 
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A technical demonstration of the Context 


contexts API. 
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Ke 


counter 
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Example Description 


Simple counter which can be incremented 
counter_functional and decremented made using function 
components. 


Uses the function 
Renderer: :with_root_and_props 


d te_destr 

acta a and the AppHand_1e struct to dynamically 
create and delete Yew apps. 

file upload Uses|gloo: : file|to read the content of 


user uploaded files. 


Kes! 


Implementation of 
Identical to [router]but using function 


components. 


Implementation of [TodoMVClusing function 


components and hooks. 


unction_memory_game 


Kes! 


unction_router| 


Hes! 


unction_todomvc 


Demonstrates how you can use futures and 
async code with Yew. Features a Markdown 
renderer. 


Implementation of|{Conway’s Game of Life 


Using immutable types in components. 


utures 


Kea 


same_of_life 


kame 


Embeds an external document as raw HTML 
by manually managing the element. 


A 


js_callbac Interacts with JavaScript code. 


Demonstrates how to use keys to improve the 
performance of lists. 


Ke 


eyed_lis 


Shows how to mount the root component to a 


t 
custom element. 


ea 


Renders a styled list which tracks hover 
events. 


Uses aJNodeRef|to focus the input element 


under the cursor. 
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Example Description 


router The best yew blog built with yew-router. 
simple_ssr Demonstrates server-side rendering. 


Demonstrates server-side rendering with 
routing. 


Kes! eae) 


ssr_router 


This is an example that demonstrates 


suspense 
<Suspense /> support. 


Kes] 


Demonstrates the use of the interval and 
timeout services. 


co. ; 
Q 
' 

| 


ea 


Demonstrates the use of the interval and 
timeout services using function components 


Implementation of [TodoMVC 


Runs two separate Yew apps which can 
communicate with each other. 


timer_functional 


om & 


WO_apps 


Kea 


Calculate Fibonacci numbers in a web worker 


thread using 


Calculate Prime numbers in a web worker 


thread using 
Controls a}WebGL canvas|from Yew. 
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Next Steps 


Have a look at Yew’ s|starter templates] when starting a project using Yew 4 they can significantly simplify 
things. 
Helping Out 


If one of the examples catches your interest, look for the "improvements" section in its README . md file. 
Most examples list a few ideas for how to improve them. Consider starting with those but don’t hesitate to 
improve an example in other ways either. 


One problem that currently plagues most examples is the lack of styling. Please help us make the 
examples look as flashy as possible! 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 
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VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isJavaliable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust": "html", } 


Neovinia] 
Lazyvimia] 


Below configuration works with[Lazy Vim]configuration and lazy.vim plugin, create a file in 
lua/plugins/nvim—lspconfig.1ua (or update your 1spconfig) with: 


return { { "neovim/nvim-lspconfig", init_options = { userLanguages = { eelixir = "html-eex", eruby = "erb", rust = "html", Fe }, 


e@ |Add a template for creating components 


JetBrains IDEs 
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JetBrains IDEs 


Support 
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This is unreleased documentation for Yew Next version. 


For up-to-date documentation, see the (0.21). 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 
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VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isjavailable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust": "html", } 


Neovinia] 
Lazyvimia] 


Below configuration works with[Lazy Vim]configuration and lazy.vim plugin, create a file in 
lua/plugins/nvim—lspconfig.1ua (or update your 1spconfig) with: 


return { { "neovim/nvim-lspconfig", init_options = { userLanguages = { eelixir = "html-eex", eruby = "erb", rust = "html", Fe }, 
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JetBrains IDEs 
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Migration guides 


This is documentation for Yew 0.20, which is no longer actively maintained. 


For up-to-date documentation, see the (0.21). 
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Editor Setup 


contribute 


Using a different editor? Feel free to add instructions for your editor of choice. 


Add a template for creating componentga| 
JetBrains IDEsa] 


1. Navigate to File | Settings | Editor | Live Templates. 

2. Select Rust and click on the + icon to add a new Live Template. 

3. Give it a name and description of your preference. 

4. Paste the following snippet(s) into the Template Text section. 

5. Change the applicability on the lower right, select Rust > Item > Module 


For function components, use the following template. 


@ (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double 
quotes. 


#[derive(PartialEq, Properties) ]pub struct $Name$Props {}#[function_component]pub fn $Name$(props: &$Name$Props) -> Html { html! { <$tag$>SEND$</S$tag$> }} 


For struct components, you can use the following more complicated template. 


html! ( SBTMLS 


VS Coddal 


1. Navigate to File > Preferences > User Snippets. 
2. Select Rust as the language. 
3. Add the following snippet in the snippet JSON file: 


Support for the htm1! Macraal 
JetBrains IDEsAl 


JetBrains added experimental support for proc-macro expansion in April 2021. This feature must be 


enabled before it can be used.|See the blog post here. 


This still won’t enable HTML autofill and formatting help, although it will enable variable resolution for 
component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages 
will work inside the macro. 
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VS Coddal 
Rust-Yew extension] 


Rust- Yew extension isjavaliable on VSC Marketplace} providing syntax highlight, renames, hover, and 


more. 


Emmet support should work out of the box, if not please fall back to edditing the sett ings. json file: 


"emmet.includeLanguages": { "rust. “hemi, } 


Edit this page 
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Focus on what matters 
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@ |Twitter Twitter 
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IntelliJ Rust: Updates for 2021.1 


Marina Kalashina 


This is the first entry we are publishing in a dedicated blog for IntelliJ Rust! Previously hosted on the 
CLion blog} our articles were tied closely to that particular IDE. From now on, weall be describing the 


pluginas news and features with regard to all the [IDEs ités compatible with 


Have you already explored the [documentation}we released a while ago? If not, we encourage you to check 
it out! It describes the plugin in full detail and also gives some general IDE-related info. Our 
documentation system is still in active development on both the frontend and the content edge, so your 
feedback is very welcome! Please share your experience in the comments below or submit an issue in our 
[tracker|(we are working on a more convenient solution for collecting feedback on the docs). 


Now letds dive into the updates that have landed in the plugin in this release cycle. 


e 

° 

@ |Improvements in refactorings 

° 

e 
. : : — 

e 


Initial support for procedural macros 


Debugging in more IDEs 


Previously, debugging for your Rust code was available in CLion and IntelliJ IDEA Ultimate only. 
Starting from the 2021.1 version of the IDEs, it also works in and|PyCharm Pro} It is 
implemented similarly to that in IntelliJ IDEA Ultimate and requires the|Native Debugging Support|plugin 


and works with LLDB. 
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Note that on Windows your project should be built using/Rustas MSVC toolchain (see[this issue] for details 
on MSVC LLDB support). 


Structured view in the Build tool window 


The structured view for the compiler’s output inside the Build tool window is now enabled by default. The 
dedicated tab, Build Output, opens up automatically when you call any Cargo command with a building 
step, such as build, run, test, check, and others. 


By default, it shows warnings and failures for a build. Use the aeyea button in the left-hand pane if you 
prefer successful steps to be displayed as well: 
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Build: Sync Build Output m 
Compiling c2-chacha v0.2.3 : no method named “is_zero fou 
Compiling generic-array v0.13.2 
Compiling rand_core v0.5.1 

Rp Compiling rand_chacha v0.2.1 

co} Compiling rand_xorshift v0.2.0 


¥Y Show Warnings 


¥ Show Successful Steps 


Compiling rand_distr v0.2.2 
Compiling alga v0.9.2 
Compiling nalgebra v0.20.0 
householder.rs 
No method named ‘is_zero’ found for associé 
Compiling serde_json v1.0.41 


Problems A Build E44 Terminal Q Event Log 


This structured view works with Cargo versions 1.48.0 and later. If you are using an earlier Cargo version, 
the compiler’s output will be logged in plain text as before. 


Improvements in refactorings 


Change Signature 


If you are working in a JetBrains IDE with code in languages other than Rust, you might be accustomed to 


the|Change Signature|refactoring. Now it works for Rust too! 


This refactoring can help you quickly change the name and return type of a function, modify the list of the 
parameters and set the default ones, and also add the async or unsafe prefix. 
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fn process_person_data(name: &str) { 
©): 


fn main() { 
process_person_data( 


Problems “© Build Q Event 


Currently, the implementation of Change Signature for Rust lacks the suggestions available for other 
languages. We plan to add this functionality shortly. 


Rename suggestions 


Now you donat have to call[Rename|manually when changing a code element like struct, function, or local 
variable. Just start typing a new name, and the refactoring will suggest a list of hints right away: 
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Let mut eval outputs 
Let start = Instant:: 
mut non cmd] code 


for segment in CodeBlock: :new() .original_user_code( 


if Let CodeKind:: (command ) = &segment. 


eval _outputs.merge( self.process_command(&command. 


} else { 


non cmd code cmd _code.with_segment(segment) ; 


et result if non cmd cod { 


(EvalOutputs: :new()) 


self. 


.eval_with_callbacks( 


cmd code, callbacks) 


duration = start.elapsed(); 


match result { 


Editor updates 


All Rust-related actions are now grouped under a separate node in the Tools section of the main menu and 
in context menus all over the IDE: 
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assert_eq!(m1 * m2, DMatrix::zeros 
@ Show Context Actions 


O Paste 
Copy / Paste Special 
Column Selection Mode 


Refactor 
Folding 


Go To 
Generate... 


Run ‘Test core::empty::em...' AR 
Debug ‘Test core::empty::em...' “A@D_ s(5)) 
More Run/Debug > 


Open In 
Local History 


External Tools 3) 
[s+ Compare with Clipboard ; 9 4) 


4)) 


© Create Gist... 
(@NRGSt NF Reformat File with Rustfmt 
Add BOM < # Reformat Cargo Project with Rustfmt 
. oni & Rust REPL 
Share in Playground 


= DMatrix:: 
= DMatrix::< >::zeros 3 0) 


A new action, Share in Playground, is a timesaver when you need to share a piece of code on[Rust | 
Make a selection, call Tools | Rust | Share in Playground, and IJ Rust will post your code 
there for you: 
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main.rs 


8 
ro) 


a 
am 


@, Build Q Event Log 
84:1 (146 chars, € 000M 


iO 


Another notable update in the editor is the new intention for making an item public or private: 
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Clone, Debug 
Cholesky<N: Scalar : Dim> 
DefauLtALLocator: AlLlLocator< 


: MatrixN< > 
* Convert to tuple 
* Make *|* pub(crate) 


* Add derive clause Cholesky< 


* Make ‘Il pub 
Default Add imp! block 
MatrixN 


as 


CholeskyScalar + Zero : Dim> Cholesky< 
DefaulLtALLocator: AlLlLocator< > 


Enhancements in conditional compilation support 


In this release cycle, we added the functionality for Cargo features to help you easily navigate 
between the usages of a particular feature across the entire code base: 
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] 
] 


> BE Usages of Cargo feature "arbitrary" — Results in ‘All Places’ 


I - ac 


random_orthogonal.rs #[cfg(feature 
random_sdp.rs #[cfg(feature 


random_sdp.rs #[cfg(feature 


HNN8ON88888 


isometry_construction.rs Wis (raature 
isometry_construction.rs #[cfg(feature 
isometry_construction.rs #([cfg(feature 
orthographic.rs #[cfg(feature 
orthographic.rs #([cfg(feature 
perspective.rs #([cfg(feature 


perspective.rs #([cfg(feature 


point_construction.rs #([cfg(feature 
quaternion_construction.rs #([cfg(feature 


quaternion_construction.rs #[cfg(feature 


( 
( 
( 
( 
point_construction.rs #([cfg(feature 
( 
( 
( 
( 


quaternion_construction.rs #([cfg(feature 


Completion now works for the feature argument, as well as the featuresa values, in both cfg and 
cfg_attr attributes: 


282 


>: base: 


:: base: 


>: base: 


::base:: 


Dim, DimAdd 


>: base: 


>: base: 


::base: 


Scalar + 


:allocator::{Allocator, Reallocator} 
:constraint::{DimEqg, SameNumberOfColumns, SameNum 


-dime serde-serialize 


dime serde 


td 

parse 

tdweb 
erde_derive 


Diml DimSub, Di 


:stol 


abomonation-serialize 
pest 


> DMa 


7 {De pe t derive owVector 


rand_distr 
Zert : >> Matri 


Getting to cfg_attr support, IJ Rust now takes the nested attributes inside cfg_attr into account 


during name resolution and code analysis. This applies to the cases like cfg_attr(.. 


can 


derive(...)) orcfg_attr(..., path="..."). 
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B Project 


Structure 


) 
O 
oO 


% Favorites 


#[cfg_attr(not(feature = 


mod color; 


fn main() { 
@ color: :print(); 
} 


[features] 


green = [] 


© Problems kt Git Terminal A, Build = TODO Q Event 


Experimental name resolution engine: fixes, features, and 
optimizations 


In the we announced a redesign of the pluginds name resolution engine. The new 


engine is still in the experimental stage and is disabled by default. To give it a try, enable the Use 
experimental name resolution engine checkbox in Settings / Preferences | Languages & Frameworks | 
Rust. 


Over the last months, the new engine has received a lot of fixes and updates. Here are a few of the key 
ones: 


The new engine is now capable of resolving |derive|procedural]macros| (learn more on procedural 
macros support below). 

It finds all possible imp1 blocks for a type alias. Previously, for performance reasons, they were 
processed only when the number of aliases for the corresponding type didnat exceed 10. Now the 


crates that heavily use type aliases, such as [nalgebra]or [winapi] can be resolved properly. 


It supports file-level #! [macro_use] and cfg attributes. 


It fully supports when resolving macros. 


It properly resolves multi-segment macro paths and macro calls inside files included by include!. 
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On top of that, the engineas memory consumption has been reduced significantly, along with an overall 
speedup of the algorithm. This is especially noticeable in large Rust modules. 


Initial support for procedural macros 


IntelliJ Rust is now capable of expanding |function-like procedural macros} providing them with|syntax | 
highlighting the|Show Macro Expansion|popup, and other features already available for 


declarative macros. 
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Link 


pause_text 


The current implementation is in its early stages, so please mind possible issues and unexpected behaviour 
in some cases. To try it out, call Help | Find Action (Ctr1+Shift+A on Linux/Windows, 4§4A on 
macOS), search for Experimental Features, and enable org.rust.cargo.evaluate.build.scripts and 
org.rust.macros.proc: 
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Experimental Features 
Name Enabled 
com. intellij.sh.run.with.wsl 
org.rust.cargo. build.tool.window 
org.rust.cargo.test.tool.window 


org.rust.cargo.fetch.out.dir 


org.rust.macros.new.engine 
org.rust.macros.proc 
org.rust.resolve.new.engine 
org.rust.crates.local.index 
org.rust.cargo.features.settings.gutter 


org.rust.cargo.fetch.actual.stdlib.metadata 


Description 


Run build scripts while project refresh. It allows collecting 
information about generated items like “cfg options, environment 
variables, etc 


Cancel 


Make sure tofreload|the project before checking out your code. 


If you are interested in the progress of procedural macros support, keep an eye on this|{tacking issue] 


We would like to continue the tradition of giving thanks to the external contributors who have helped us in 
this release cycle. Thank you for dedicating your time and effort to IntelliJ Rust! 


Jakub BerAjnek' 


Michael Morgan 
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u 


silon 


aar Yogev 


Toshiaki Kameyama 


Thatas it for the most recent updates in the IJ Rust plugin. Thank you for reading and stay tuned! 


Your Rust team 
JetBrains 
The Drive to Develop 


newsletter-rust 
@ Share 

° 
° 
e 


Whatas New in IntelliJ Rust for the 2021.2 Release Cycle Next post 
Subscribe to Rust Blog updates 


Subscribe form 


By submitting this form, I agree to the JetBrains|Privacy Policy Notification icon 


By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and 
location data to send me newsletters, including commercial communications, and to process my personal 
data for this purpose. I agree that JetBrains may process said data using |third-party|services for this 
purpose in accordance with the [JetBrains Privacy Policy| I understand that I can revoke this consent at any 


time in In addition, an unsubscribe link is included in each email. 
Submit 


Thanks, we’ve got you! 
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Discover more 
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RustRover, a JetBrains IDE. 
Now Generally Available! 


Free for non-commercial use 


RustRover Is Released and Includes a Free Non-Commercial Option 


Weare excit 
developers! 


Kirill Smelov 
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Boosting Dev 


Boosting Dev Experience with Serverless Rust in RustRover 


Vitaly Bragilevsk 
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Features Update 
Retrospective 
for O04 20235 


lia Afanasiev 
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Introducing RustRover — 
a standalone Rust IDE 
by JetBrains 


Introducing RustRover 4 A Standalone Rust IDE by JetBrains 


aWhen will there be a Rust IDE?4 We get this question from our users quite frequent] 
lhappy to announce that the day has arrived. Please welcome RustRover, our standalone IDE for Rust. As 
many of you are aware, weave worked for years to bring support for Rust functionality as 4i 
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